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How to Use This Book 



How to Use This Teach Yourself VISUALLY Book 

Do you look at the pictures in a book or newspaper 
before anything else on a page? Would you rather see 
an image instead of read about how to do something? 
Search no further. This book is for you. Opening Teach 
Yourself VISUALLY Dreamweaver CS4 enables you to 
read less and learn more about the Adobe Dreamweaver 
program. 

Who Needs This Book 

This book is for readers who have never used 
Dreamweaver to create Web sites, as well as those who 
have some experience and want to learn the newest 
features in version CS4 of this powerful program. All 
you need to get started is a basic understanding of how 
to surf the Web and a desire to learn to create your 
own Web sites. 



Book Organization 

Teach Yourself VISUALLY Dreamweaver CS4 has 16 
chapters. 

Chapter Organization 

All the chapters in this book are listed in the book's 
table of contents. Each chapter is made up of sections. 
A section is a set of steps that show you how to 
complete a specific task. 

Each section, usually contained on two facing pages, 
has an introduction to the task at hand, a set of full- 
color screen shots and steps that walk you through the 
task, and a set of tips. This format enables you to 
quickly look at a topic of interest and learn it instantly. 
Chapters group together three or more sections with a 
common theme. A chapter may also contain pages that 
give you the background information needed to 
understand the sections in a chapter. 

What You Need to Use This Book 

To use the program discussed in this book, you will 
need a computer that uses the Macintosh or Windows 
operating systems and the Adobe Dreamweaver 
software program. At a minimum, you will need a 
computer that meets these requirements: 



Windows Users 

• Processor: Intel Pentium 4, Intel Centrino, Intel 
Xeon, or Intel Core Duo (or compatible) processor 

• OS: Microsoft Windows XP with Service Pack 2 or 
Windows Vista Home Premium, Business, Ultimate, 
or Enterprise (certified for 32-bit editions) 

• RAM: 512MB 

• Hard disk: 1 GB of free space 

• 1,280 x 800 monitor resolution with 16-bit or 
greater video card 

• Internet connection for activation 
Macintosh Users 

• Processor: PowerPC G5 or multicore Intel processor 

• OS: Mac OS 10.4.11 or 10.5 

• RAM: 512MB 

• Hard disk: 1 GB of free space 

• 1,280 x 800 monitor resolution with 16-bit or 
greater video card 

• Internet connection for activation 

Operating System Differences 

Dreamweaver is designed to work the same on both 
the Mac and Windows platforms, with the exception of 
minor interface differences and key commands. The 
majority of the figures in this book feature a PC 
computer using Windows Vista, but the program also 
works on Windows XP and later versions. When a 
command or action is different on a Macintosh, the 
alternative is included in the instructions. 

Using the Mouse 

This book uses the following conventions to describe 
the actions that you perform when using the mouse: 



Click 

Press your left mouse button once. You generally click 
your mouse on something to select something on the 
screen. If you have a Macintosh and are using a mouse 
with only one button, click it to complete the same 
action. 

Double-click 

Press your left mouse button twice. Double-clicking 
something on the computer screen generally opens 
whatever item you have double-clicked. 

Right-click 

Press your right mouse button. When you right-click 
items on the computer screen, the program displays a 
menu containing commands specific to the selected 
item. If you are on a Macintosh and using a mouse with 
only one key, you can press the §€ key and then click to 
complete the same action. 

Click and Drag and Release the Mouse 

Move your mouse pointer and hover it over an item on 
the screen. Press and hold down the left mouse button. 
Now, with the mouse button held down, move the 
mouse to where you want to place the item and then 
release the button. You use this method to move an 
item from one area of the computer screen to another. 

The Conventions in This Book 

A number of typographic and layout styles have been 
used throughout Teach Yourself VISUALLY 
Dreamweaver CS4 to distinguish different types of 
information. 

Bold 

Bold type represents the names of commands and 
options that you interact with. Bold type also indicates 
text and numbers that you must type into a dialog box 
or window. 

Italics 

Italic words introduce a new term and are followed by 
a definition. 



Numbered Steps 

You must perform the instructions in numbered steps in 
order to successfully complete a section and achieve 
the final results. 

Bulleted Steps 

These steps point out various optional features. You do 
not have to perform these steps; they simply give 
additional information about a feature. 

Indented Text 

Indented text tells you what the program does in 
response to your following a numbered step. For 
example, if you click a certain menu command, a dialog 
box may appear, or a window may open. Indented text 
may also tell you what the final result is when you 
follow a set of numbered steps. 

Notes 

Notes give additional information. They may describe 
special conditions that may occur during an operation. 
They may warn you of a situation that you want to 
avoid - for example, the loss of data. A note may also 
cross-reference a related area of the book. A cross- 
reference may guide you to another chapter or another 
section within the current chapter. 

Icons and Buttons 

Icons and buttons are graphical representations within 
the text. They show you exactly what you need to click 
to perform a step. 




You can easily identify the tips in any section 
by looking for the TIPS icon. Tips offer 
additional information, including tips, hints, 
and tricks. You can use the TIPS information 



to go beyond what you have learned in the steps. 
About the Web Site 

You will find project files, quizzes, and other additional 
resources on the companion Web site for this book, 
www.digitalfamily.com/tyv. 
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This chapter describes the 
World Wide Web, 
introduces the different 
types of information that 
you can put on a Web site, 
and shows you how to get 
started with Dreamweaver. 
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Introducing the 
World Wide Web 



You can use Dreamweaver to create and 
publish pages on the World Wide Web. 



The World Wide Web 

The World Wide Web - or simply the Web - is a global 
collection of documents located on Internet-connected 
computers. You can access the Web by using a Web browser. 
Web pages are connected to one another by hyperlinks that you 
can click. 





A Web Site 

A Web site is a collection of linked Web pages stored on a Web 
server. Most Web sites have a home page that describes the 
information located on the Web site and provides a place 
where people can start their exploration of the Web site. A 
good Web site includes links that make it easy to find the most 
important content on the site. 




Dreamweaver is a program that enables you to create 
Web pages with hyperlinks, text, images, and 
multimedia. You can create Web pages on your 
computer and then, when you are finished, use 
Dreamweaver to transfer the finished files to a Web 
server where others can view them on the Web. 
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Explore the Many Ways 
to Design a Web Page 



In the early days of the Internet, 
Web design was easy but boring. 
Today, there are many more 
ways to design Web pages, but 
first you have to decide which 
approach is best for your site. 
Here are a few of the options 
that you can choose. 




Text and Images 

Inserting text and images into a 
Web page is the simplest design 
option. Dreamweaver makes it 
easy to add images and text and 
to change the size, color, and 
font of the text on your Web 
page. It also makes it easy to 
organize text into paragraphs, 
headings, and lists and to change 
alignment. However, if you want 
to create a more complex design, 
you need to use one of the other 
options described in this section. 




Tables 

Tables have long been a popular 
choice for creating page designs. By 
merging and splitting table cells, 
you can create complex layouts 
using tables. By turning off the 
border, you can make the actual 
table invisible. Today CSS layouts 
are recommended over table 
layouts except for tabular data, 
such as the kind of information you 
would find in a spreadsheet 
program. For example, tables are a 
great choice for formatting 
database content. 




Frames 

In a framed Web site, the Web 
browser window is divided into 
several rectangular frames, and a 
different Web page loads into each 
frame. Users can scroll through 
content in each frame, independent 
of the content in the other frames. 
Dreamweaver offers visual tools for 
building frame-based Web sites. 
Although frames still have a place 
on the Web, many designers do not 
like frames because only the first 
page of a frameset can be 
bookmarked, frames are harder to 
optimize for search engines, and 
navigating around frames can be 
confusing to visitors. 
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AP Divs 

Dreamweaver's AP Divs, called layers in earlier 
versions of Dreamweaver, use absolute positioning to 
create "boxes" that you can use to position images, 
text, and other content on a page. AP Divs are very 
intuitive to use: You just click and drag to create a 
box anywhere on a Web page. Their biggest limitation 
is that you cannot center a design created with AP 
Divs, a common trick for accommodating different 
screen sizes. Another limitation is that, although they 
seem to give you precise design control, their display 
can vary dramatically from browser to browser. 




Adobe Flash 

Some of the "flashiest" sites on the Web have been 
created using Adobe Flash, a vector-based design 
program that you can use to create animations and 
highly advanced interactive features. Although you 
can use Dreamweaver to add Flash files to your Web 
pages and to create some basic Flash elements, such 
as Flash buttons, you should know that many of the 
most elaborate multimedia sites on the Web were 
created using Flash and Dreamweaver. 




CSS Layouts 

Many professional Web designers today recommend 
creating page layouts using cascading style sheets 
(CSS). Although AP Divs are technically CSS layouts, 
they receive very special treatment in Dreamweaver 
and have some very significant limitations. When 
designers refer to CSS layouts, they generally mean 
designs that do not use absolute positioning — or 
that use it very sparingly. Using CSS is one of the 
most challenging Web design options, but it brings 
some powerful benefits, such as greater accessibility 
and flexibility, which can help your site look better to 
more people on a greater range of devices. When 
used effectively, pages designed with CSS are also 
faster to download and easier to update. 




Dynamic Web Sites 

At the highest end of the Web design spectrum, you 
can connect a Web site to a database, extensible 
markup language (XML) files, or another data source 
to create highly interactive sites with features such as 
shopping carts, discussion boards, and more. 
Database-driven sites are especially useful when a 
Web site grows to more than 100 pages or so 
because they are much more efficient to update. 
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Start Dreamweaver 
on a PC 



You can start Dreamweaver on a PC and 
begin building pages that you can 
publish on the Web. You first need to 
purchase and install Dreamweaver if you 
do not have it already. You can also 
download a free trial version at 
www.adobe.com. 




O Click Start. 
Q Click All 



© Click Adobe Design Premium 
CS4. 

O Click Adobe Dreamweaver 
CS4. 

Note: Your path to the Dreamweaver application 
may be different, depending on how you installed 
your software and your operating system. 



The Dreamweaver start screen 
appears. 




Start Dreamweaver 
on a Macintosh I 



You can start Dreamweaver on a 
Macintosh and begin building 
pages that you can publish on the 
Web. You first need to purchase 
and install Dreamweaver or 
download a free trial version at 
www.adobe.com. 
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O Double-click your hard drive icon. 
Q Click Applications. 
© Click Adobe D 



Note: The exact location of the Dreamweaver 
folder depends on how you installed your 
software. 

© Double-click Adobe 
Dreamweaver CS4.app. 



The Dreamweaver start screen 
appears. 

Just before Dreamweaver starts, 
you may be prompted with a 
dialog box that gives you the 
option of making Dreamweaver 
the default editor for many kinds 
of file types, including CSS, XML, 
and PHP. If you want to open 
these kinds of files automatically 
in Dreamweaver, click OK. 
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Tour the Dreamweaver 
Interface on a PC 



Dreamweaver CS4 on a PC 
features a variety of windows, 
panels, and inspectors. 



Contain the commands for using 
Dreamweaver. Many of these 
commands are duplicated within 
the windows, panels, and 
inspectors of Dreamweaver. 



Toolbar 

Contains shortcuts to preview and 
display features and a text field 
where you can specify the title of 
a page. 



Insert panel 

Provides easy access to common 
features. There are several different 
Insert panels that you can select, 
depending on the type of features 
you want to insert in your page. 
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The main 
workspace where 
you insert and 
arrange the text, 
images, and other 
elements of your 
Web page. 



Windows that provide access to the Design, 
Code, Application, Tag, Files, Layers, and History 
panels. 



Property inspector 

Used to display and edit the attributes of any 
element selected in the Document window. 



Tour the Dreamweaver 
Interface on a Macintosh 



Dreamweaver CS4 on a Macintosh 
likewise features a variety of 
windows, panels, and inspectors. 



Contain the commands for 
using Dreamweaver. Many of 
these commands are duplicated 
within the windows, panels, and 
inspectors of Dreamweaver. 



Toolbar 

Contains shortcuts to preview and 
display features and a text field 
where you can specify the title of 
a page. 



Insert panel 

Provides easy access to common 
features. There are several different 
Insert panels that you can select, 
depending on the type of features 
you want to insert in your page. 




Panels 

Windows that provide access to the Design, Code, 
Application, Tag, Files, Layers, and History panels. 



Property inspector 

Used to display and edit the attributes of any 
element selected in the Document window. 




You can show or hide accessory 
windows, also called panels and 
inspectors, by using commands in 
the Window menu. 



SHOW A WINDOW 

O Click Window. 

© Click the name of the window, 
panel, or inspector that you want 
to open. 

This example opens the Property 
inspector. 

© \7\ next to a name indicates that 
the window, panel, or inspector is 
open. 



• Dreamweaver displays the 

inspector. 
HIDE A WINDOW 
O Click Window. 

@ Click the check-marked 0 
name of the window that you 
want to hide. 

Note: You can click Window and then click Hide 
Panels to hide everything except the Document 
window and toolbar. 





You can use the help tools that 
are built in to Dreamweaver to 
find answers to your questions 
or to learn techniques that you 
do not know. 




O Click Help. 

Q Click 



: You can also click the Help icon 
d®P in the Property inspector. 



The Help page opens and displays 
information related to any feature 
you were using if you clicked [©]. 

• You can click any topic that you want 
help with. 

@ Type one or more keywords about 
the topic that you want help with. 

Note: You can narrow your search by separating 
keywords with +. 




A list of topics appears. 

) Click a topic from the search 
result list. 

Information appears on the topic 
that you selected. 
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Are there different ways of opening the Help tools and 
other options in Dreamweaver? 

Very often, yes. As with many programs, there is often more than 
one way to do the same task. For example, you can access many 
tools and commands, such as Modify Page Properties, by using 
either a menu or the Property inspector. You can also use the Split 
or Code view commands to view and edit the HTML code directly, if 
you know how to write HTML. 




Define a New Web Site 20 

Create a New Web Page 22 

Add a Title to a Web Page 23 

Save a Web Page 24 
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Before you create your Web pages, you need to 
define your site in Dreamweaver and set up a 
root folder where you can store all the files in 
your site. Defining a root site folder enables 
Dreamweaver to manage your files in the Files 
panel and properly set links. As you set up 
your site, you can create a new folder on your 
hard drive or select an existing folder as your 
root folder. For more information on the Files 
panel, see Chapter 14. 




Define a New Web Site 



O Click the Manage Sites link. 

The Manage Sites dialog box 
appears. 

0 Click New. 

0 Click Site. 



The Site Definition dialog box 
appears. 

O Click the Advanced tab. 

0 Type a name for your site. 

0 Click the folder icon Q to 
search for your Web site folder. 
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The Choose Local Root Folder 
dialog box appears. 

Q Click here and select the folder 
that stores your Web pages. 

You can create a new folder by 
clicking QL typing in a new 
name for the folder, and then 
selecting the new folder. 

O Click Select. 



Q Click □ and select the folder 
where you want to store the 
images for your Web site. 

© Type the URL (the Web address 
or domain name) of your Web 



Click this option to enable the 
cache, which makes it faster to 
create links O changes to 

> Click OK. 
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Why is it important to keep all my Web site files in the same 
root folder on my computer? 

Keeping everything in the same root folder on your local computer 
enables you to easily transfer your Web site files to a Web server without 
changing the organization of the files. If your Web site files are not 
organized on the Web server in the same way that they are organized 
on your local computer, hyperlinks may not work, and images may not 
be displayed properly. For more information about working with Web 
site files, see Chapter 14. 





When you launch Dreamweaver 
CS4, the initial start page opens. 
There are many useful shortcuts 
on this page, including some for 
creating a new Web page. 




O Click File. 
Q Click New. 



The New Document dialog box 
appears. 

0 Click Blank Page. 

O Click HTML to specify the type of 
page. 

0 Click None to create a blank 
page. 

You can also create preformatted 
pages by choosing any of the 
other options under Layout in the 
New Document dialog box. 

0 Click Create. 

Dreamweaver displays a new 
Document window. 
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A Web page title appears in the title bar when 
the page opens in a Web browser. The title 
helps search engines to index pages with more 
accuracy and is saved in a user's Bookmarks 
list if he or she bookmarks your Web page. 




When you create a new 
document, an untitled document 
appears in the main workspace. 

Note: The page name and filename are "Untitled" 
until you save them. 

O Type a name for your Web page 
in the Title text box. 

© Press rarai (CHSDSD- 



The Web page title appears in the 
title bar when the page is 
displayed in a Web browser. 

# If the browser supports tabbed 
browsing, the title also appears 
on the tab. 
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You should save your Web page as soon as 
you create it — and again before closing the 
program or transferring the page to a 
remote site. It is also a good idea to save all 
your files frequently to prevent work from 
being lost due to power outages or system 
failures. For more information about 
connecting to remote sites, see Chapter 14. 




SAVE YOUR DOCUMENT 
O Click File. 
O Click Save. 

: You can click Save As to save an 
existing file with a new filename. 



If you are saving a new file for 
the first time, the Save As dialog 
box appears. 

© Click here and select your local 
site folder. 

Note: Your local site folder is where you want to 
save the pages and other files for your Web site. 

© Type a name for your Web page. 

0 Click Save. 



Setting Up Your Web Site 



• Dreamweaver saves the Web 
page, and the filename and path 
appear in the title bar. 

• You can click [x] to close the 
page. 



REVERT TO AN EARLIER 
VERSION OF A PAGE 

O Click File. 

O Click Revert. 

The page reverts to the previously 
saved version. All the changes 
that you made since the last time 
you saved the file are lost. 

Note: If you exit Dreamweaver after you save a 
document, Dreamweaver cannot revert to the 
previous version. 



Why should I name the main page of my site 
index.html? 

You should name your main Web site or home page index.html 
because that is the filename that most Web servers open first 
when a user types a domain name into a Web browser. If you 
name your main page index.html and it does not open as your 
first page when your site is on the server, then check with your 
system administrator or hosting service. Some servers use 
default.htm or index.htm instead of index.html. 




Preview a Web Page 
in a Browser 



You can see how your Web page will 
appear online by previewing it in a Web 
browser. The Preview in Browser 
command works with any Web browser 
that is installed on your computer. 
Although Dreamweaver does not ship with 
Web browser software, Internet Explorer is 
preinstalled on most computers. 



Preview a Web Page 



LAUNCH A WEB BROWSER 

O Click the Preview in Browser 
button ([^]). 

Q Click a Web browser from the 
drop-down menu that appears. 

You can also preview the page in 
your primary Web browser by 
pressing 



The Web browser launches and 
opens the current page. 

When you preview a Web page in 
a browser, you can follow links 
by clicking them, just as you 
would when viewing Web sites. 
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ADD A BROWSER 

O Click File. 

0 Click Preview in B 

0 Click Edit Browser List. 

The Preferences dialog box 
appears. 
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© Click the plus sign ([+]) . 

The Add Browser dialog box appears. 

0 Type a name for your Web browser. 

0 Click Browse and select any Web 
browser on your computer's hard 
drive. 

0 Click OK. 

0 Click OK to close the Preferences 
dialog box. 

The newly added Web browser 
appears in the browser list. 




Why should I use more than one Web browser for 
previews? 

Dreamweaver makes it easy for you to add more than one Web 
browser because not all Web browsers display Web pages the 
same way. For example, Internet Explorer and Firefox sometimes 
display Web pages differently. As a result, it is important to test 
your pages in a variety of browsers to ensure that they will look 
good to all your visitors. By using the browser list, you can easily 
test your Web page in a different Web browser with just a few 
mouse clicks and adjust your designs until they look good in all 
the browsers that you think your visitors may use. 
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Exploring the 
Dreamweaver Interface 




In this chapter, you take a 
tour of the panels and 
windows that make up the 
Dreamweaver interface. You 
will discover all the handy 
tools and features that 
make this an award-winning 
Web design program. 
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Inspector 34 
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Create and Apply a Custom Command 40 

Set Preferences 42 
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Choose a 

Workspace Layout 



Dreamweaver CS4 includes more 
workspace layout options than 
ever. You can choose from a 
number of preset layouts or create 
your own custom layout. You can 
choose from layouts optimized for 
designers or coders or choose 
Classic view if you preferred the 
way things looked in CS3. 




O Click the arrow 0 to select a 
layout option. 

Q Click the Designer layout option. 




The workspace changes to the 
Designer layout. 

© Click □ to select a different 
layout option. 

O Click the Coder layout option. 
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The workspace changes to the 
Coder layout. 

0 Click Q to select a different 
layout option. 

0 Click the Classic layout option. 



The workspace changes to the 
Classic layout, the default layout 
included in the previous version 
of Dreamweaver, CS3. 
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Which layout is right for me? 

Dreamweaver CS4 includes more preset workspace layouts than any 
previous version. Each is designed to optimize the workspace based on 
common ways of working in the program. If you are a designer, the 
Designer option will probably work best for you. If you are a programmer, 
the Coder option is probably best. Experiment with the various options, 
choose the one you like best, and remember that you can always change 
the workspace to best accommodate the project you are working on at 
the time. 




Customize the 
Document Window 



Dreamweaver CS4 comes with a 
variety of workspace layouts, and 
you can customize them further to 
create an interface that makes your 
favorite features accessible. You 
can open and close panels, dock 
floating features, and save your 
custom layouts for future use. 





The panels are minimized. 

O You can click Q to expand the 
panels. 

© Click anywhere in the gray bar 
above the Property inspector. 



The Property inspector is 
minimized. 

• You can click anywhere in the 
gray bar again to expand the 
Property inspector. 




How can I keep my favorite features handy? 

You can open or close any of the panels and inspectors in Dreamweaver so 
that your favorite features are handy when you need them and so that 
others are out of the way when you do not need them. Most of the panels 
and other options are available from the Windows menu. For example, to 
open the CSS Styles panel, you can click Window and then click CSS 
Styles. As you work, you may choose to have different panels opened or 
closed to give you more workspace or to provide easier access to the 
features that you are using. 




Format Content with 
the Property Inspector 



The Property inspector enables you 
to view the properties associated with 
the object or text that is currently 
selected in the Document window. 
Text fields, drop-down menus, 
buttons, and other form elements in 
the Property inspector enable you to 
modify these properties. 




FORMAT AN IMAGE 

O Click to select the image. 

The image properties appear. 

You can change many image 
properties in the Property 
inspector, such as the border size 
or alignment. 

Q To wrap the text around the 
image, click the Align [▼] to open 
the alignment options. 

Q Click an alignment option, such 



The text automatically wraps 
around the image when you 
apply Left or Right alignment. 

© Click and drag to select the text. 

& Click CSS. 
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FORMAT TEXT 

The CSS font options appear in 
the Property inspector. 

0 With the text selected, click the 
Font arrow Q. 

Q Click to select a font group, such 
as Verdana, Geneva, sans- 
serif. 

Dreamweaver includes these font 
collections because they are 
installed on most computers, so 
the page will be displayed for the 
user as it is for the designer. 



© Your text automatically changes 
to reflect your formatting choices 
in the Property inspector. 

• You can change many text 
properties in the Property 
inspector, such as format, size, 
and alignment. 

Note: When you apply a font collection, 
Dreamweaver automatically creates a CSS style. 
You find instructions for using the CSS Rule dialog 
box in Chapter 12. 




When would I use more than one font on a Web page? 

When you choose a font face in Dreamweaver, the program offers fonts in 
groups of three. For example, one option is Arial, Helvetica, and sans-serif, 
and another option is Times New Roman, Times, and serif. Dreamweaver 
provides these collections because the fonts that are displayed on a Web 
page are determined by the available fonts on the visitor's computer. 
Because you cannot guarantee what fonts a user will have, Web browsers 
use the first font that matches in a list of fonts. Thus, in the first example, 
the font will be displayed as follows: in Arial if the Arial font is on the 
visitor's computer; in Helvetica if Arial is not available; and in any available 
sans-serif font if neither of the first two fonts is available. 





Dreamweaver features a highly 
customizable workspace with 
windows that lock into place and 
panels that you can open or close 
and expand or collapse. You can 
also move panels around the 
screen by clicking the top bar of 
a panel and dragging. 




O Click 

Q Click the name of the panel that 
you want to open, such as Files. 

The panel appears; in the 
example of the Files panel, it 
displays all the files in the Web 
site. 



Q Click a tab to open a related 
panel, such as the Assets panel. 

The panel appears. 

# In the Assets panel, you can click 
the Images button (ffflD - 




• All the available images in the site 
appear in the Assets panel. 

© Click any image filename to 
preview the image in the display 
area at the top of the Assets 
panel. 

) Click anywhere in any of the gray 
Files panel tabs to close a Files 
panel. 




In this example, the Files and 
Assets panels collapse. 

Note: When you collapse a panel such as the Files 
panel, other panels become more visible. 

• You can click the name in the tab 
of any panel to expand it. 



How can I keep track of my assets? 

The Assets panel provides access to many handy features, such as the 
Colors assets, which list all the colors that are used on a site. For 
example, this is useful if you are using a particular text color and you 
want to use the same color consistently on every page. Similarly, the 
Links assets make it easy to access links that are used elsewhere in your 
site so that you can quickly and easily set frequently used links. 




Add an Email Link 
from the Insert Panel 



You can insert elements, such as 
images, tables, and layers, into your 
pages with the Insert panel. Located 
at the top of the window, the panel 
features a drop-down menu that 
reveals options such as Common 
elements, Forms, and Text. 



O Click and drag to select the text 
that you want to make an email 
link. 

© If the Insert panel is not already 
visible, click the Insert button to 
expand it. 

0 Click [▼] and select Common. 

O Click Email Link. 

The Email Link dialog box 
appears. 

0 Type an email address. 

0 Click OK. 

The text changes to an email 
hyperlink. 

Note: You can click any button in the Insert panel 
to add that element to your document. 
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Correct Errors with 
the History Panel 
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The History panel keeps track of the 
commands that you perform in 
Dreamweaver. When you backtrack 
through those commands, you can return 
your page to a previous state. This is a 
convenient way to correct errors. 




O Click Window. 
0 Click History. 



The History panel appears. 

• To undo one or more commands, 
you can click and drag the slider 
fljg) upward. 

To redo the commands, you can 
click and drag [jg downward. 

Note: If you move backward, the later changes 
are deleted. You can only add steps to the end of 
the sequence. 
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Create and Apply 
a Custom Command 



You can select a sequence of 
commands that have been recorded 
in the History panel and save the 
sequence as a custom command. The 
new command appears under the 
Commands menu. You can then 
apply it to other elements on the 
page to automate repetitive tasks. 



In this example, text is formatted 
in bold and italics. 

© Press EH) + click (QJ + click) 
each step to select it. 

© Right-click (BJJJ + click) the 
selection. 

O Click Save As 



The Save As Command dialog 
box appears. 

0 Type a name for the command. 

O Click OK. 

Dreamweaver saves the 
command. 

Note: You cannot use this feature with all 
commands. For example, clicking and dragging ar, 
element cannot be included in a command. 




SAVE A COMMAND SEQUENCE 

O Select an element and perform a 
sequence of commands. 
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You can easily change many 
options in Dreamweaver by 
changing the settings in the 
Preferences dialog box. This 
enables you to modify the 
interface and many default 
options to customize 
Dreamweaver to better suit how 
you like to work. 
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O Click Edit. 

Q Click Preferences. 



The Preferences dialog box 
appears. 

) Click a Preferences category. 

In this example, the Status Bar 
category is selected. 
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O Options appear for the category 
that you selected. 

© Change settings for the property 
that you want to alter. 

• In this example, the Connection 
Speed option is set to 128Kb. 

0 Click OK. 



The changes take effect 
immediately. 

• In this example, the status bar 
now displays download times 
that assume a 128Kb connection 
speed. 




How do I ensure that Dreamweaver does not change my HTML 
or other code? 

You can select options under the Code Rewriting category in the 
Preferences dialog box to ensure that Dreamweaver does not 
automatically correct or modify your code. For example, you can turn 
off the error-correcting functions, specify the files that Dreamweaver 
should not rewrite based on file extension, and disable the character- 
encoding features. 





Working 
XHTML 
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Dreamweaver helps you 
to build Web pages by 
automatically writing the 
XHTML code as you create 
pages in Design view. This 
chapter introduces the 
code behind your pages, 
as well as the tools in 
Dreamweaver that enable 
you to edit XHTML code. 
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Although Dreamweaver writes 
the XHTML code for you, 
which can save you time and 
trouble, learning the basics of 
XHTML can help you better 
understand how Web design 
works. And you always have the 
option of writing or editing the 
code manually. 




XHTML 

Extensible hypertext markup language (XHTML) is 
the formatting language that you can use to create 
Web pages. When you open a Web page in a Web 
browser, the XHTML code tells the Web browser 
how to display the text, images, and other content 
on the page. By default, Dreamweaver CS4 writes 
XHTML Transitional instead of HTML because XHTML 
is a stricter version of HTML that is designed to 
comply with contemporary Web standards. 




XHTML Tags 

The basic unit of XHTML is called a tag. You can 
recognize XHTML tags by their angle brackets: 

<hl>This is a headline</hl> 
<p>It is followed by some plain text 
in a paragraph tag. <b>This text will 
appear bold because it is surrounded 
by the bold tag.</b> This text will 
not be bold.</p> 

You can format text and other elements on your page 
by placing them inside the XHTML tags. When you 
use the formatting tools in Dreamweaver, the 
program automatically inserts tags in the code. 



Working with XHTML 




How Tags Work 

Some XHTML tags work in pairs. Open and close tags 
surround content in a document and control the 
formatting of the content, such as when the <b> and 
</b> tags set off bold text. Other tags can stand 
alone, such as the <br /> tag, which adds a line 
break. XHTML tags must have a closing tag, even if 
there is only one tag, and close tags always contain a 
forward slash (/). As a result, the line break tag in 
XHTML looks like this: <br />. XHTML must be 
written in lowercase letters. 




XHTML Documents 

Because XHTML documents are plain-text files, you 
can open and edit them with any text editor. In fact, 
in the early days of the Web, most people created 
their pages with simple editors such as Notepad (in 
Windows) and SimpleText (for the Macintosh). If you 
use Dreamweaver, you have the advantage of being 
able to write XHTML code when you want to or 
letting Dreamweaver write it for you. 




Create Web Pages without Knowing XHTML 

Dreamweaver streamlines the process of creating 
Web pages by giving you an easy-to-use, visual 
interface with which you can generate XHTML code. 
You specify formatting with menu commands and 
button clicks, and Dreamweaver takes care of writing 
the underlying XHTML code. When you build a Web 
page in the Document window, you can see your 
page as it will appear in a Web browser instead of as 
XHTML code. 




Direct Access to the XHTML Code 

Dreamweaver allows you direct access to the raw 
XHTML code. This is helpful if you want to edit the 
code directly. In Dreamweaver, you can work in Code 
view. Design view, or Split view, which enables you to 
see Code and Design views simultaneously. You can 
also use the Quick Tag Editor to edit code without 
switching to Code or Design view. 




Work in Design View 
and Code View 



You can switch to Code view in the 
Document window to inspect and edit 
the XHTML code and other code on 
the Web page. You can use the Split 
view to see both the XHTML code and 
Design view at the same time. 



You will probably do most of \ 
Design view, which displays yi 
way it will appear in most Wei 




O In the Document window, click 
the Split view button. 

O You can click the Code view 
button to display the source code 
of your page in the Document 
window. 

• You can click the Design view 
button to hide the code and only 
view the page design as it would 
appear in a Web browser. 



Both Code view and Design view 
appear in the Document window 
when you click Split. 

• The XHTML and other code 
appear in the upper pane. 

O The Design view appears in the 
lower pane. 

Q Click to select some text in the 
Design view pane. 

• The corresponding code becomes 
highlighted in the Code view 
pane. 
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Explore Head and 
Body Tags 



Every XHTML document contains head and body tags. To view the XHTML 
code of a Web page, you can click the Code view button in the Document 
window, or you can click Window and then click Code Inspector. 



DOCTYPE 

The DOCTYPE describes the 
document and identifies that 
it was created with XHTML 
1.0 Transitional, which is 
currently recommended for 
most Web pages. 



<html> tags 

Open and close <html> tags 
begin and end every HTML 
document. 



< title > tags 

Open and close <title> tags 
display the content that appears 
in the title bar of a Web browser. 
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<body> tags 
All the content that is 
displayed in the Web 
browser window is 
contained within the 
open and close 
<body> tags. 
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Explore Block-Formatting 
Tags 



Working with XHTML 




XHTML is made up of many different tags, each designed to specify a particular kind 
of formatting, such as paragraph breaks, headline styles, and bulleted lists. The same 
page is displayed in these two figures, first in Code view and then in Design view. 



This page is displayed in Code view in Dreamweaver. 

<div> tag 

The <div> tag is used to divide content and is often 
combined with styles that are created in CSS. 




<hl> to <h6> tags 

The heading tags are ideal for formatting headlines. 
The <hl> tag creates the largest heading style, 
whereas the <h6> tag is the smallest. 



<img sro tag 

The <img src> tag is 
used to insert an image 
into a page. 

<p> tags 

The open and close <p> 
tags separate paragraphs 
of content and add a 
space between images 
and other elements. 



This is the same page displayed in Design view. 

<div> tag 

The <div> tag is displayed in Design view as a box. The width 
and centering of the container is defined with a CSS style. 




<hl> to <h6> tags 

The <hl> tag makes the headline text large 
and bold. 



<p> tags 

The <p> tag separates 
content into paragraph 
blocks and adds space 
around images and other 
elements. 



<img sro tag 

The <img sro tag 
displays the image on the 
page. 



The Clean Up HTML/XHTML dialog 
box appears. 

Q Click the cleanup options for 
code that you want to remove 
(□ changes to 0). 

0 Click the cleanup options that you 
want to select changes to [TJ. 

O Click OK. 

• Dreamweaver parses the HTML 
code and displays the results, 
including a summary of what was 
removed. 

O Click OK. 

• The cleaned-up HTML code 
appears in the Document 
window. In this example, the two 
empty <hl> tags were removed. 

• The corresponding changes are 
also visible in Design view. In this 
example, there is no longer any 
extra space at the top of the 
page. 




How do empty tags end up appearing 
in the Dreamweaver HTML code? 

Sometimes when you edit text in the 
Document window, for example, by cutting 
and pasting sentences and 
reformatting words, 
Dreamweaver removes 
text from within tags 
without removing the 
actual tags, leaving the 
formatting code behind. 




Does Dreamweaver fix invalid HTML code? 

By default, Dreamweaver rewrites some instances of invalid 
HTML code. When you open an HTML document, 
Dreamweaver rewrites tags that are not nested properly, 
closes tags that are not allowed to remain open, and 
removes extra closing tags. If Dreamweaver 
does not recognize a tag, it highlights it in 
red and displays it in the Document 
window, but it does not remove the tag. 
You can change or turn off this behavior by 
clicking Edit, then clicking Preferences, and 
then selecting the category Code Rewriting. 




Dreamweaver gives you various 
ways to view, add to, and edit 
the head content of a Web page. 
For example, meta tags store 
special descriptive information 
about the page that can be used 
by search engines. 



View and Edit Head Content 



INSERT META KEYWORDS 
O Click Insert. 
0 Click HTML. 
O Click Head Tags. 
O Click Keywords. 



The Keywords dialog box 
appears. 

© Type a series of keywords, 
separated by commas, that 
describe the content of the page. 

0 Click OK. 

The keywords are added to the 
code. Keywords are not displayed 
in Design view or in a Web 
browser. 




INSERT A META DESCRIPTION 

O Click Insert. 

O Click HTML. 

© Click Head Tags. 

O Click Description. 



The Description dialog box 
appears. 

0 Type a brief description of the 
content of the page. 

O Click OK. 

The description is added to the 
code. Descriptions are not 
displayed in Design view or in a 
Web browser. 




How can I influence how search engines rank my pages? 

Some search engines give greater importance to the description and 
keyword information that you add to the head content of HTML 
documents than others, but it is always good practice to include it. You 
can also improve search engine ranking by including keywords in the title 
tag of the page. 
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Make Quick Edits 
to XHTML Tags 



You can get quick access to 
XHTML and other code by 
using the Quick Tag Editor. You 
can also insert short pieces of 
prewritten code from the 
Snippets panel. 




USE THE QUICK TAG EDITOR 

O Click to place your cursor in an 
area of the page that you want to 
edit, such as this headline. 

Note: It is not necessary to select the entire tag. 

0 Right-click (Q + click) the tag 
you want to edit in the Tag 
selector. 

0 Click Quick Tag Editor. 



O Click to select the tag and type to 
replace, delete, or add more text. 

0 Press ( ytgj (f-BWHl) . 

I ; The tag is automatically changed 
in the HTML code, and the 
change becomes visible in the 
Tag selector. 

# Click Split to view the code if you 
want to check your work. 




Working with XHTML 



ADD CODE SNIPPETS 

O Click Snippets. 

Q Click the plus sign (+) to open a 
snippet collection. 

© Click to select a snippet. 

O Click Insert. 



• The Snippet is automatically 
inserted into the document. 

O You can click the double arrow 
to close the Snippets panel. 

You can choose from a variety of 
snippets included with 
Dreamweaver, and you can 
create your own to make it easy 
to add frequently used pieces of 
code to your pages. 




Does Dreamweaver support all XHTML tags? 

Dreamweaver CS4 includes the vast majority of 
XHTML tags in its many menus and panels. You 
can also write your own tags in Code view if you 
want to use tags that are not 
supported in Dreamweaver's 
features. When you write XHTML 
in Code view, Dreamweaver 
automatically provides assistance 
with its code completion features. 




What does the text Lorem ipsum dolor mean 
that appears in Web templates? 

The text is Latin, a commonly used language for 
"dummy" text that is used as a placeholder when 

laying out pages. Although Latin , 

text is often used as placeholder IfaSflcir^™'™^ 
text in designs, its meaning I Text ' J °'°" 

generally has nothing to do with ' 
its usage. The idea is that using 
Latin text will make it obvious that 
the text still needs to be replaced. 



CHAPTER 





Formatting an 
Styling Text 




Text is the easiest type of 
information to add to a 
Web page using 
Dreamweaver. This chapter 
shows you how to create 
and format headlines, 
paragraphs, bulleted lists, 
and stylized text. 
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• The second headline changes to a 
size slightly smaller than the first 
and also becomes bold. 

Note: The higher the heading number, the smaller 
the text formatting. 

Q Click and drag to select text that 
you want to use for a third-level 
heading. 

Note: This example shows restyling the second 
headline. 

Q Click the Format Q. 
0 Click Heading 3. 



• The headline changes to a size 
smaller than the Heading 2 size 
but remains bold. 




What heading levels should I use to 
format my text? 

Headings 1, 2, and 3 are often 
used for titles and 
subtitles. Heading 4 is 
similar to a bold version 
of default text. 
Headings 5 and 6 are 
often used for smaller 
text, such as copyright or 
disclaimer information. 




Why are my headlines different sizes when 
see them on another computer? 

Size can vary from one computer to the next, 
and some users set their Web browsers 
display larger or smaller type on their 
computers. Browsers use the default 
text size to determine the size of the 
heading. For example, Heading 1 text 
is three times larger than the default 
text size, and Heading 6 text is one- 
third the default size. 





What controls the width of the paragraphs on my Web page? 

The width of your paragraphs depends on the width of 
the Web browser window or the container that 
surrounds your text. You can also use tables or 
div tags with CSS to control the width of your 
paragraphs. If you do not, when a user changes 
the size of the browser window, the widths of 
the paragraphs will also change. For more 
information on tables, see Chapter 8. For more 
information on CSS, see Chapters 12 and 13. 




What is the HTML code for 
paragraphs? 

In HTML, paragraphs are 
surrounded by 
opening <p> and 
closing </p> 
tags. You can 
click the Code 
view button to 
view the HTML 
code of the page. 
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You can make selected paragraphs stand 
out from the rest of the text on your 
Web page by indenting them. For 
example, indents are often used for 
displaying quotations. 



mi.u.iimi.jii.i.M 

O Click and drag to select a 
h or series of 



) Click g| to indent the text. 



I ; Additional space appears in both 
the left and right margins of the 



You can repeat steps 1 and 2 to 
indent a paragraph further. 

• You can outdent an indented 
paragraph by clicking |. 





Hi 



You can organize text items into 
ordered and unordered lists. 
Unordered lists have items that are 
indented and bulleted. Ordered 
lists have items that are indented 
and numbered or lettered. 




CREATE AN UNORDERED LIST 

O Type your list items in the 
Document window. 

Q Click between the items and 
press l=fflH1 ( l:75t 1) to place 
each item in a separate 
paragraph. 

© Click and drag to select all the list 
items. 

© Click the Unordered List button 
df|]) in the Property inspector. 



# The list items appear indented 
and bulleted. 
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CREATE AN ORDERED LIST 

O Type your list items in the 
Document window. 

© Click between the items and 
press ( ] ( ( D to place 
each item in a separate 



© Click and drag to select all the list 
items. 

O Click the Ordered List button (B 
in the Property inspector. 



• The list items appear indented 
and numbered. 




Can I modify the appearance of n 
unordered list? 

Yes. You can modify the style of an 
unordered list by highlighting 
an item in the list and clicking 
Format, then clicking List, 
and then clicking Properties. 
The dialog box that appears 
enables you to select 
different bullet styles for 
your unordered list. 




Can I modify the appearance of my ordered 
list with CSS? 

Yes. You can create CSS style rules 
for the ul, ol, and li tags and 
change the spacing, alignment, 
and other formatting elements 
of lists. You find instructions 
for creating CSS styles in 
Chapter 12. 
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INSERT OTHER CHARACTERS 

O Click where you want to insert 
the special character. 

O Click Insert. 

O Click HTML. 

O Click Special Characters. 

0 Click Other. 
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The Insert Other Character dialog 
box appears, displaying a wider 
variety of special characters. 

© Click a special character. 

O Click OK. 

# The special character appears in 
your Web page. 

The HTML code that defines that 
special character is inserted into 
the HTML code of the page. 




How do I include non-English- 
language text on my Web page" 

Many foreign languages 
feature accented characters 
that do not appear on 
standard keyboards. You 
can insert most of these 
characters using the 
Special Characters feature 
described here. 




Why do special characters look strange in my 
Web browser? 

Although most Web browsers 
display double quotation marks 
without problems, some standard 
punctuation marks are considered 
special characters and require 
special code. If you do not use 
the special HTML code, those \ """'^^j'"*;^ 
characters may not be displayed 
properly. 




You can change the font style of 
your text in a variety of ways in 
Dreamweaver, but all of them 
require using CSS. 

Dreamweaver CS4 added a CSS mode 
to the Property inspector to make it 
easy to create style rules as you format 



Change the Font Face 



O Click and drag to select the text. 

© Click CSS in the Property 
inspector. 

O Click the Font Q 

© Click a font collection. 

Note: Leave the Targeted Rule field set to <New 
CSS Rule>. In Chapter 12, you find instructions for 
editing CSS rules with the Property inspector. 



The New CSS Rule dialog box 
opens. 

© Enter a name for the new style. 
Note: Do not use spaces or special characters. 

Dreamweaver will automatically 
add any special characters 
necessary based on the selector 
type, such as the period (.) used 
in the Class style shown in this 
example. 

0 Click OK. 





© The text changes to the first font 
in the collection that is available 
on your hard drive. 

The new style can be applied to 
additional elements by using the 
Property inspector. 

Note: To find out more about how to create and 
apply styles, see Chapter 12. 



Q Click CSS Styles. 

© Click the name of the new style 
rule. 

Q Use 0 to change the font 
collection. 

The font face is changed. 




How are fonts classified? 

The two most common categories of fonts are 
serif and sans serif. Serif fonts are distinguished by 
the decorations, or serifs, that make the ends of 
their lines curly. Common serif 
fonts include Times New Roman, 
Palatino, and Garamond. Sans 
serif fonts lack these decorations 
and have straight edges. Common 
sans serif fonts include Arial, 
Verdana, and Helvetica. 




Why are there so few fonts available from 
the Font menu? 

A font must be installed on the user's computer to 
be displayed in a Web browser. Dreamweaver's 
default list of fonts specifies the 
common typefaces that are available 
on most computers, and alternative 
styles if the user does not have those / 
fonts installed. If you want to use an 
unusual font, you should convert the At.:., / 
text to a graphic. 





O Click and drag to select the text 
that you want to change. 



Q Click the Targeted Rule Q 

© Click the name of a style. 

If you have not yet created a style, 
you can choose <New CSS Rule>. 

O Click the Color Swatch button (Pj) 
in the Property inspector. 

The Color Palette appears. 

0 Click a color. 

1 1 The selected text appears in the 
new color. 

The CSS style rule changes to 
include the color setting. 





You can change the font face, 
color, and size, as well as other 
formatting options for the entire 
page in the Page Properties 
dialog box. 




O Click Modify. 

0 Click Page Properties. 

You can also click Page 
Properties in the Property 
inspector. 




The Page Properties dialog box 
appears. 

0 Click the Page Font Q. 

Q Click any font collection to select it. 

0 Click the Siie Q and choose a 
preset size or enter a number. 

0 Click this 0. 

0 Click a font size option to select it. 




O Click the Text Color swatch (pj) 

The Color Palette appears. 

Q Click any color to select it. 

fl!) Click Apply to see the changes 
applied to the page. 

Q Click OK to save the changes and 
close the dialog box. 



Your text appears in the new 
font, size, and color on your 
Web page. 




What are the letter and number combinations that appear in the 
color fields of Dreamweaver? 

HTML represents colors using six-digit codes called hexadecimal codes, or hex 
codes. These codes start with a pound sign (#), followed by a series of 
numbers that represent the amount of red, green, and blue used to create a 
particular color. Instead of ranging from 0 to 9, hex-code digits range from 0 to 
F, with A equal to 10, B equal to 11, and so on through to F, which is equal to 
1 5. The first two digits in the hex code specify the amount of red in the 
selected color. The second two digits specify the amount of green, and the third 
two digits specify the amount of blue. When you select a color from a color 
picker, Dreamweaver automatically generates the corresponding hex code. 





Copy Text from 
Another Document 



You can save time by copying and pasting text 
from an existing document, instead of typing it 
all over again. This is particularly convenient 
when you have a lot of text in a word-processing 
program such as Microsoft Word or data in a 
spreadsheet in a program such as Excel. When 
you paste text in Dreamweaver, you have 
multiple formatting choices. 



Copy Text from Another Document 



O Click and drag to select text in the 
original file, such as this 
document created in Microsoft 
Word. 

Q Click the Copy button. 
Alternatively, you can use 

E3a + Q(E3 + Q). 



O Click where you want to insert 
the text. 

O Click Edit. 

0 Click Paste Special. 
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The Paste Special dialog box 
opens. 

0 Click a Paste option. 

O Click OK. 



The text is inserted into the 
HTML file. 

Dreamweaver automatically 
formats the text in HTML, based 
on the formatting option that you 
selected in the Paste Special 
dialog box. 




When is it a good idea to copy and paste text? 

Even if you type at speeds of over 100 words per minute, you can save time if 
you do not have to retype all your documents. If your original text file was 
created using a word-processing program such as Microsoft Word, you can speed 
up the process by importing the Word document into Dreamweaver. You can also 
copy and paste text from Excel documents, and Dreamweaver automatically 
builds tables to duplicate the formatting from Excel. After you have pasted the 
content into Dreamweaver, you can edit and format the text or other data as you 
normally would. 
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Working with Images 
and Multimedia 




Make your Web page more 
interesting by adding 
photos, graphics, 
animation, video, and other 
visual elements. This 
chapter shows you how to 
insert and format these 
elements. 



Insert an Image into a Web Page ... 

Wrap Text around an Image 

Add Space around an Image 

Crop an Image 

Resize an Image 

Open an Image in an Image Editor. 

Add a Background Image 

Change the Background Color 

Change Text Colors 

Insert a Flash File 

Insert Flash Video Files 

Create a Rollover Image 

Insert a Navigation Bar 



Insert an Image 
into a Web Page 



You can insert different types of 
images into your Web page, 
including clip art, digital camera 
images, and scanned photos. You 
must first save the images in a 
Web format, such as GIF, PNG, 
or JPEG. 



O Click to position the ^ where you 
want to insert the image. 

0 Click Insert. 

O Click Image. 

You can also click the Image button 
( TfflD in the Common Insert panel. 



The Select Image Source dialog box 
appears. 

© Click 0 and select the folder that 
contains the image. 

0 Click the image file that you want to 
insert into your Web page. 

• A preview of the image appears. 

• You can insert an image that exists at 
an external Web address by typing 
the address into the URL field. 

O Click OK. 





The Image Tag Accessibility 
Attributes dialog box appears. 

Q Enter a description of the image. 

Note: Alternate text is displayed only if the image 
is not visible. It is important for visually impaired 
visitors who use screen readers to "read" Web 
pages to them. 

Q Enter a URL for a longer 
description, if available. 

0 Click OK. 

O The image appears where you 
positioned your cursor in the 
Web page. 

To delete an image, click the 
image and press [ ] . 
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What file formats can you use for Web images? 

The majority of the images that you see on Web pages are GIF, PNG, or 
JPEG files. All three of these file formats can be optimized, a process that 
makes them smaller than other image files and therefore download faster. 
The GIF and PNG formats are best for images that have a limited number 
of colors, such as cartoons or line art. The JPEG format is best for 
photographs and other images with millions of colors. You can insert GIF, 
PNG, and JPEG files into your Web page using the steps shown here. 




Wrap Text around 
an Image 



You can wrap text around an image by 
aligning the image to one side of a Web 
page. Wrapping text around images 
enables you to fit more information 
onto the screen and gives your Web 
pages a more finished, professional look. 
There are many alignment options. 
Experiment to find the best effect for 
your page. 




ALIGN AN IMAGE 

O Click the image to select it. 

O Click the Align Q. 

© Click an alignment option to 
position the image. 

C You can click here to expand the 
Property inspector if the 
alignment options are not visible. 



# The text flows around the image 
according to the alignment that 
you selected. 

In this example, the text flows to 
the right of the left-aligned image. 
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• You can select other options from 
the Align menu for different 
wrapping effects, such as Right 
or Middle. 

# In this example, the text flows to 
the left of the right-aligned image. 



ADD A BORDER TO AN IMAGE 

O Click the image to select it. 

Q Type a width into the Border 
field. 

This example uses a border of 2 
pixels. 

A black border appears around 
the image. If the image is a link, 
the border appears in the link 
color. 

Note: To learn how to change link colors, see 
Chapter 7. 
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How can I determine the download time for 
my Web page? 

The total size of your Web page appears in 
kilobytes (KB) on the status bar at 
the bottom of the workspace. The 
total size includes the size of 
your HTML file, the size of your 
images, and the size of any 
other elements on the Web page. 
Next to the size is the estimated 
download time for the Web page. 




What is the ideal size of a Web page? 

Most Web designers feel comfortable putting up a 
page with a total size under 100KB. However, there 
are exceptions to this rule. For 
example, you may want to break 
this rule for an especially 
important image file. The 100KB 
limit does not apply to 
multimedia files, although 
multimedia files should be kept as 
small as possible. 




Add Space around 
an Image 




Working with Images and Multimedia 



ADD SPACE ABOVE AND BELOW 
AN IMAGE 

O Click the image to select it. 

© Type an amount in the V Space 

field. 

© Press (| 



• Extra space appears above and 
below the image. 
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Is there a more precise way to add space around my image? 

In many cases, adding space around your images enhances the 
appearance of your Web page. The extra space makes text easier to read 
and keeps adjacent images from appearing as a single image. However, 
when you add space using the horizontal and vertical space options in 
Dreamweaver, you add space to all sides of the image. If you only want 
to create space on one side, you can create a style using CSS margin 
settings to add space to only one side. You learn more about CSS in 
Chapters 12 and 13. 




You can trim, or crop, an image by 
using the Crop tool and dragging 
the crop handles to adjust how 
much of the image you want to 
delete. This can be useful for quick 
edits without using an external 
image-editing program, as it 
physically crops the image file. 




O Click the image to select it. 
© Click the Crop tool button (| 



A dialog box appears. 

You can turn off this warning 
by checking the check box 
(□ changes to [p. 

0 Click OK. 




© Click and drag the black, square 
handles to define the area that 
you want to crop. 

The part of the photo that 
appears grayed out will be 
deleted. 

0 Double-click inside the crop box. 




• The image is trimmed to the size 
of the crop box. 

Note: Keep in mind that when you save the page, 
the image is permanently cropped. 
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Should I edit images in Dreamweaver or use an external graphics 
program? 

Adobe has added the Crop and other basic editing tools to make working 
on a Web page faster and easier. If you need to do a simple crop, the Crop 
tool is faster than opening the image in an image-editing program such as 
Adobe Fireworks or Adobe Photoshop. However, if you want to save a 
copy of the original before you make the crop, or do other image editing, 
then you need to use a dedicated image-editing program. 





You can change the display size of an 
image without changing the file size of the 
image. You can do this by changing the 
pixel size or by clicking and dragging the 
corner of the image. 

Pixels are tiny, solid-color squares that make up 
a digital image. When you specify a size in pixels, 
you are using a very small unit of measurement. 




0 Type the width that you want in 
pixels. 

0 Press ( fjgg (fiHBffll) . 

© Type the height that you want in 
pixels. 

0 Press RJ 



• The image is displayed with its 
new dimensions. 



RESIZE USING PIXEL OR 








PERCENTAGE DIMENSIONS 








O Click the image to select it. 


Galapagos Islands Diving 




1 ) The dimensions of the image 
appear. 
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CLICK AND DRAG TO RESIZE 

O Click the image to select it. 

© Drag one of the handles at the 
edge of the image changes 
to\). 

To resize the image 
proportionally, press and hold 
down ( ) as you drag a 
corner. 

The image expands or contracts 
to the new size. 



RESET THE IMAGE TO ITS 
ORIGINAL SIZE 

Note: You can reset any image to its original size. 

O Click the image to select it. 

O Click the Reset Size button (op in 
the Property inspector. 

The image returns to its original 
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What is the best way to change the dimensions of an image on 
a Web page? 

Although you can quickly change the display size of an image by 
changing the pixel dimensions in the Property inspector or by clicking 
and dragging to stretch or shrink it on the Web page, this does not 
actually resize the image's true dimensions. Enlarging the display size of 
an image by changing the pixel size in Dreamweaver may cause 
distortion or blurriness. Reducing the size of an image this way requires 
visitors to your site to download an image that is larger than necessary. A 
better way to resize an image is to open it in an image editor such as 
Adobe Fireworks or Photoshop and change its actual size. 




Open an Image in 
an Image Editor 



Adobe designed Dreamweaver to work with multiple 
image programs so that you can easily open and edit 
images while you are working on your Web pages. 
Adobe Fireworks and Photoshop are sophisticated 
image-editing programs that are designed to make 
many changes to an image. 



can use any image editor. Fireworks 
and Photoshop are integrated with Dreamweaver 
because Adobe makes all three programs. 




O Click the image to select it in 
Dreamweaver. 

Note: You can open any image in an external 
image editor from within Dreamweaver. 



Q Click the Photoshop button fl) 
in the Property inspector. 

You may have to wait a few 
moments while Photoshop opens. 

In Dreamweaver's preferences, 
you can associate other image 
editors, such as Adobe Fireworks. 




The image opens in the 
Photoshop window. 

You can now edit the image. 

© After making your changes, click 
File. 

© Click Save As. 

© Save the image with the same 
name and format, replacing the 
original image. 

Your changes to the image 
become permanent. 



@ Photoshop saves the image, and 
it is automatically updated in the 
Dreamweaver window. 

To edit the image again or to edit 
another image, you can select the 
image and repeat steps 2 to 5. 




What can you do in an image-editing program? 

A program such as Adobe Fireworks or Photoshop enables you to 
edit and combine images to create almost anything that you can 
imagine. In Dreamweaver's preferences, you can associate Adobe 
Fireworks, Photoshop, or any other editor on your computer. If 
you use Fireworks, you can open it to edit an image directly from 
Dreamweaver by clicking the Edit/Fireworks Logo button (or ■] 
if you use Photoshop). 




Add a Background 
Image 



You can incorporate a background 
image to add texture to your Web page. 
Background images appear beneath any 
text or images that are on your Web 
page and are repeated across and down 
the Web browser window. 




O Click Page Properties in the 

Property inspector. 

The Page Properties dialog box 
appears. 

0 Click Appearance (CSS). 

0 Click Browse. 



The Select Image Source dialog 
box appears. 

© Click 0 and select the folder that 
contains the background image 
file. 

0 Click the background image that 
you want to insert. 

© A preview image appears. 

0 Click OK. 
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• The image filename and path 
appear in the Background Image 
text field. 

O Click OK. 
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The image appears as a 
background on the Web page. 

Note: If the image is smaller than the display 
area, as in this example, it tiles horizontally and 
vertically to fill the entire window. You can resize 
the image in an image editor to adjust its 




What types of images make good backgrounds? 

Textures, subtle patterns, and photos with large open areas 
all make good background images. It is important to make 
sure that the image does not clash with the text and other 
content in the foreground or overwhelm the rest of the 
page. Using an image that tiles seamlessly is 
also a good idea so that your background 
appears to be one large image that covers 
the entire page. Fireworks and Photoshop 
include a number of features that can help 
you create background images. 



Are backgrounds always patterns? 

Although many backgrounds repeat a 
pattern of some kind, a background image 
can also be an image that is big enough to 
fill the entire screen. Because a background 
image tiles, a vertical image 
creates a stripe across the 
top of the page, and a 
horizontal image creates a 
left-hand stripe. 





O Click Page Properties in the 

Property inspector. 

The Page Properties dialog box 
appears. 

© Click Appearance (CSS). 

© Click the Background color pj 

to open the color palette 
(t^ changes to /). 

Q Click a color using the 
Eyedropper tool 

0 Click OK. 



The background of your Web 
page is displayed in the color that 
you selected. 

Note: For additional information about Web color, 
see Chapter 5. 
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You can change the text color for the 
entire page using Dreamweaver's Page 
Properties dialog box. 

When you alter page and text colors, make sure that 
the text is still readable. In general, light text colors 
work best against a dark background, and dark text 
colors work best against a light background. 



^^^^^^^^^^^^^^ 




O Click Page Properties in the 

Property inspector. 

The Page Properties dialog box 
appears. 

O Click Appearance (CSS). 

© Click the Text color Pj to open 
the color palette (t^ changes 
to/). 

© Click a color using the 
Eyedropper tool 

0 Click OK. 



Any text on your Web page is 
displayed in the color that you 
selected. 
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You can add life to your Web page by 
adding Flash animations and slideshows. 
A Flash file is a multimedia file that is 
created with Adobe Flash or other 
software that supports the Flash format 
with the .swf extension. Flash files are 
ideal for animated banners, cartoons, 
slideshows, interactive animations, and 
site navigation features. 




O Position the where you want to 
insert a Flash file. 

0 Click Insert. 

0 Click Media. 

O Click SWF. 

You can also click the Media 
button in the Insert panel and 
choose SWF. 



The Select File dialog box 
appears. 

0 Click H and select the folder that 
contains the Flash file. 

Note: Flash filenames end with an .swf file 
extension. 

0 Click the file that you want to 
insert into your Web page. 

0 Click OK. 
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• A gray box representing the Flash 
file appears in the Document 
window. 

• You can change the size of the 
Flash movie by clicking and 
dragging its lower-left corner or 
by entering a width and height in 
the Property inspector. 

© Click Play in the Property 
inspector to test the Flash file. 



G The Flash file is displayed in your 
Dreamweaver document. 

• You can click the Quality [▼] and 

select the level of quality at which 
you want your movie to play. 

Note: The higher the quality, the better it is 
displayed, hut then it takes longer to download. 
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What are good uses for Flash on the Web? 

Flash is an ideal tool for creating animations, interactive games, and 
other high-end features. You can even integrate video and audio files 
to create rich multimedia features for your Web site. You can learn 
more about Flash and see many examples at www.adobe.com. 





You can add audio and video files to Web pages in a 
variety of formats, including Windows Media Audio 
and Video and QuickTime. When you insert video 
and audio files in the Flash format, Dreamweaver 
provides more options for how the files play in your 
Web pages. Flash video files have the .flv extension. 

Note: You must have the Flash 7 player, or a later version, on 
your computer to play a Flash video file. If the Flash player is not 
installed, the browser displays a dialog box with instructions for 
downloading the player. 



Insert Flash Video Files 
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O Position the ^ where you want to 
insert the Flash video file in the 
Document window. 

0 Click Insert. 

0 Click Media. 

O Click FLV. 

You can also click the Media 
button in the Insert panel and 
choose FLV. 



The Insert FLV dialog box 
appears. 

0 Click Browse to select the Flash 
video file. 

Note: Flash video filenames end with the .flv file 
extension. 

0 Click the Detect Size button to 
automatically enter the height 
and width. 

0 Click OK. 

The other settings are optional 
and can be left at the defaults. 




□ 



• A gray Flash Video box appears in 
the Document window. 

© You can change the Flash video 
settings in the Property inspector. 

Q Click [Z2 to view the page in a 
Web browser and play the video. 

flj) Click a browser. 



• The selected Web browser opens 
and displays the Web page. 

When a cursor is rolled over the 
video, the Flash player controls 
are displayed. 

Note: When you insert Flash video, Dreamweaver 
automatically creates two Flash SWF files (or the 
player controls. For the video to play properly, 
these files must be uploaded to the server when 
you upload the video file to your Web server. 




What should I consider when adding multimedia content to my Web 
site? 

Remember that although you may have the latest computer software and a 
fast connection, some of your visitors may not have the necessary multimedia 
players or bandwidth for your multimedia files. You can add Flash, video, 
sound, and other multimedia files to jazz up a Web site, but if your visitors do 
not have the right programs, they cannot view them. Therefore, it is very 
important to use compression and other techniques to keep file sizes small 
and to offer links to players for any multimedia that you use. 





Rollover images are designed to react when 
someone rolls a cursor over them. They are 
commonly used in navigation bars and 
other links, but they can also be used to 
add a little surprise to your pages. A 
rollover effect can be subtle or dramatic, 
depending on the differences between the 
two images that you use in the rollover, 
but both images must be the same size. 




O Position the where you want to 
insert the rollover image. 

0 Click Insert. 

0 Click Image Objects. 

O Click I 



The Insert Rollover Image dialog 
box appears. 

0 Type an identifying name for 
scripting purposes. 

0 Click Browse and select the first 
image. 

0 Click Browse and select the 
second image. 

0 Type a description of the images. 

0 Type a URL if you want the 
rollover to serve as a link. 

© Click OK. 




□ 



Working with Images and 



Dreamweaver automatically 
inserts the scripting that you need 
to make the rollover effect work. 

© The first image in the rollover is 
displayed on the page. 

(D Click to view the page in a 
Web browser and test the 
rollover effect. 

© Click a browser. 



• When you roll your cursor over 
the first rollover image in a Web 
browser, the second image 
appears. 




How does the rollover image work? 

The interactive effect of a rollover image requires more 
than HTML. Dreamweaver creates this effect by using a 
scripting language called JavaScript. JavaScript is used for 
many kinds of interactivity, from image swaps to pop-up 
windows. JavaScript is more complex than HTML code. 
Dreamweaver includes many other JavaScript features in 
the Behaviors panel. To see what other kinds of behaviors 
are available, click Window and then click B 





You can make it easier for visitors to get to 
the main pages of your Web site with a 
navigation bar. If your Web site consists of 
more than one page, a navigation bar is the 
best way to ensure that links to all your main 
pages are available throughout your Web 
site. If your site contains many pages, link to 
the most important pages from the 
navigation bar. 




O Position the where you want to 
insert the navigation bar. 

0 Click Insert. 

0 Click Image Objects. 

O Click Navigation Bar. 



0 Type a name to identify the first 
rollover in the script. 

0 Click Browse and select the first 
Up image. 

0 Click Browse and select the first 
Over image. 

0 Click Browse and choose the 
page that the navigation button 
will link to. 

0 Click [+] and repeat steps 5 to 8 
for each navigation rollover. 

© Click OK. 





Where should I insert a navigation bar? 

As a general rule, you want the navigation bar to be in the same 
place on every page. Most designers place them at the edge of a 
page where they do not interfere with the design. It is common for 
Web pages to have left-hand navigation bars or for navigation bars to 
be inserted across the top of a page. Right-hand navigation bars are 
also fine if the page is not so wide that it may get cut off. Horizontal 
navigation bars are somewhat limited by the available space across 
the Web browser window, so some designers use them in 
combination with side navigation bars to highlight subsections of a 
Web site. 





Creating 
Hyperlinks 




Links, also called 
hyperlinks, are used to 
connect related 
information. Using 
Dreamweaver, you can 
create links from one page 
to another page in your 
Web site or to other Web 
sites on the Internet, and 
you can also create email 
links and image maps. This 
chapter shows you how to 
create these kinds of links 
using both text and images. 
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Link to Other Pages 
in Your Web Site 



Dreamweaver makes it easy to 
create a link from one page in 
your Web site to another page so 
that your visitors can navigate 
your Web site easily. 



Link to Other Pages in Your Web Site 



CREATE A LINK 

O Click and drag to select the text 
that you want to turn into a link. 

© Click [▼] and choose Common. 

0 Click the Hyperlink [*]. 




The Hyperlink dialog box 
appears. 

} The selected text is automatically 
entered in the Text field. 

O Click □ and select the HTML file 
to which you want to link. 

The other settings in the 
Hyperlink dialog box are optional. 
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Creating Hyperlinks 



• The new link appears in color 
and underlined. 

Note: To change the appearance of links, see the 
section "Change the Color of Links on a Page." 

# The filename and path appear in 
the Link field. 

Note: Links are not clickable in the Document 



You can click to test the link 
by previewing the file in a Web 
browser. 



OPEN AND EDIT A LINKED PAGE 

O Click anywhere on the text of the 
link whose destination you want 
to open. 

Q Click Modify. 

0 Click Open Linked Page. 

The link destination opens in a 
Document window, allowing you 
to edit that document. 
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How should I organize the files that make up my Web site? 

You should keep all the pages, images, and other files that make up your 
Web site in one main folder that you define as your local site root folder. 
This enables you to easily find pages and images and create links between 
your pages. It also ensures that all the links work correctly when you transfer 
the files to a Web server. If you have many pages in one section, you can 
create subfolders in the Files panel to further divide your site's file structure. 
You may also want to create a separate folder for images. For more 
information on setting up your Web site, see Chapter 2. For more 
information on transferring files to a Web server, see Chapter 14. 




Link to Another 
Web Site 



You can link from your Web site 
to any other Web site on the 
Internet, giving your visitors 
access to additional information 
and providing valuable references 
to related information. 



Link to Another Web Site 



CREATE A LINK 

O Click and drag to select the text 
that you want to turn into a link. 

0 Click [▼] and choose Common. 

0 Click the Hyperlink [*]. 

The Hyperlink dialog box 
appears. 



■} The selected text is automatically 
entered in the Text field. 

0 Type the Web address of the 
destination page in the Link field. 

Note: You must type http:// before the Web 
address. 

0 Click B 

0 Click blank to create a link that 
will open in a new browser 
window or tab. 

O Click OK. 
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Creating Hyperlinks 



• The new link appears in a color 
and underlined. 

Note: To change the appearance of links, see 
"Change the Color of Links on a Page." 

# The URL appears here. 

Note: Links are not clickable in the Document 
window. 

You can click to test the link 
by previewing the file in a Web 
browser. 

Note: To preview a Web page in a browser, see 
Chapter 2. 



REMOVE A LINK 

O Click to place anywhere in the 
text of the link that you want to 
remove. 

Q Click Modify. 

© Click Remove Link. 

Dreamweaver removes the link, 
and the text no longer appears in 
a color and underlined. 




How do I ensure that my links to other Web sites always work? 

If you have linked to a Web page whose file is later renamed or taken 
offline, your viewers receive an error message when they click the link 
on your Web site. Although you cannot always control the sites you 
like to, you can maintain your Web site by periodically viewing your 
own site in a Web browser and checking to make sure that your links to 
other sites still work properly. You can also use online services, such as 
http://validator.w3.org/checklink, to perform this check for you. Although 
neither method can bring back a Web page that no longer exists, you can 
identify which links you need to remove or update. 





You can use an image to create a 
link to another page or Web site 
in much the same way that you 
create a link with text. Using 
images as links makes it possible 
to give visitors to your site more 
ways to move from page to page. 



Using an Image As a Link 



CREATE AN IMAGE LINK 

O Click the image that you want to 
turn into a link. 

0 Click the Link gj]. 

O You can also use the Hyperlink 
dialog box, available by clicking 
[%] in the Common Insert panel, 
used in the first two sections of 
this chapter. 



The Select File dialog box 
appears. 

0 Click H and select the folder that 
contains the destination page. 

© Click the HTML file to which you 
want to link. 

0 Click OK. 





Your image becomes a link. 

• Dreamweaver automatically 
inserts the filename and path to 
the linked page. 

• You can click to test the link 
by previewing your page in a 
Web browser. 

Note: To preview a page in a Web browser, see 
Chapter 2. 



REMOVE A LINK FROM AN 
IMAGE 

O Click the linked image. 

© Click Modify. 

© Click Remove Link. 

Dreamweaver removes the link. 




How do I create a navigation bar for my Web page? 

Many Web sites include sets of images that act as link 
buttons on the top, side, or bottom of each page. These 
button images enable viewers to navigate 
through the pages of the Web site. You 
can create these button images by using . 
an image-editing program such as Adobe 
Photoshop or Adobe Fireworks and then 
using Dreamweaver to insert them into 
the page and create the links. 




How will visitors to my Web site know 
to click an image? 

When a visitor rolls the cursor over an 
image that serves as a link, the cursor turns 
into a hand. You can make it 
clearer which images are 
linked by putting links in 
context with other content 
and by grouping links to let 
visitors know that images 
are clickable. 




You can create a link to other content on 
the same page. Same-page links, often 
called jump links or anchor links, are 
commonly used on long pages when you 
want to provide an easy way to navigate to 
relevant information lower on the page. 



You create a jump link by first placing a named anchor 
where you want the link to go to and then linking from 
the text or image to the named anchor point. 




O Position the where you want to 
insert the named anchor. 



0 Click □ and choose C 
© Click the Named Anchor g. 



The Named Anchor dialog box 
appears. 

) Type a name for the anchor. 

\ Click OK. 

: An anchor appears in the 
Document window. 
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Creating Hyperlinks 



0 Click and drag to select the text 
that you want to link to the 
anchor. 

Q Click [*] in the Common Insert 
panel. 

© In the Hyperlink dialog box, click 
the LinkQ 

Q Click the anchor name. 

© Click OK. 



# The text appears as a link on the 
page. 

• The anchor name appears in the 
Link field, preceded by a pound 
(#) sign. 

Note: Links are not clickable in the Document 
window. 

You can click [Z2 to test tne link 
by previewing the file in a Web 
browser. 



Note: To preview a 
Chapter 2. 
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Why would you create a jump link to something on the 
same page? 

Web designers use jump links to make it easier to find text that 
appears lower on a page. These links are frequently used on very 
long pages to give visitors an easy way to return to the top of a page 
by clicking a jump link lower on the page. Similarly, if you have a 
Web page that has many sections of information, jump links enable 
you to link to each section from a link menu at the top of the page. 
A frequently asked questions (FAQ) page is another example of 
when to use same-page links; you can list all your questions at the 
top of the page and link to the answers lower on the page. 




Create a Link to 
Another File Type 



Links do not have to lead just to other 
Web pages. You can also link to other 
file types, such as image files, word- 
processing documents, PDF files, and 
multimedia files. Many of these files 
require their own players, but as long 
as your visitor has the required 
program, the file opens automatically 
when the user clicks the link. 



Create a Link to Another File Type 



O Click and drag to select the text 
that you want to turn into a link. 

0 Click □ and choose C 

0 Click the Hyperlink 



The Hyperlink dialog box appears. 

The selected text is automatically 
entered in the Text field. 

Q To link to a file on another Web site, 
type the Web address of the 
destination page. 

0 To link to a file on your own site, 
click [g] and select the file to which 
you want to link. 

The rest of the settings are optional. 
0 Click OK. 
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Creating Hyperlinks 



• The text appears as a link on the 
page. 

Note: Links are not clickable in the Document 
window. 

# You can click [^] to preview the 
link in a Web browser. 



When you click the link in a Web 
browser, the linked file opens. 

In this example, a PDF document 
opens in the Web browser 
window. 




EP3: How Spain's Biggest 
Daily Reaches the Youth 
Market Online 



How do users view files that are not HTML documents? 

What users see when they click links to other types of files depends on 
how they have configured their Web browsers and what plug-ins or other 
applications they have installed on their computers. For example, if you link 
to a QuickTime movie (which has a .mov file extension), your visitors need 
to have a player that can display QuickTime movies. It is always good 
practice to include a link to the player for any special file type to make it 
easy for users to find and download the player if they choose. 




You can link different areas of 
an image to different pages with 
an image map. First, you define 
areas of the image, called 
botspots, using Dreamweaver's 
image -mapping tools, and then 
you turn them into links. 



1 JMP / 1 LINK 3 



O Click the image. 
Q Type a name for the image map. 
Note: You cannot use spaces or special characters. 
© Click a drawing tool. 

You can create rectangular 
shapes with the Rectangular 
Hotspot tool (|0]), oval shapes 
with the Oval Hotspot tool flo]), 
and irregular shapes with the 
Polygon Hotspot tool Q. 



© Draw an area on the image that 
will serve as a hotspot for a link. 

C If a message appears instructing 
you to describe the image map in 
the Alt file, click OK to close the 
dialog box, type a description in 
the Alt field, and then resume 
drawing the hotspot area over 
the image. 

To delete a hotspot, you can 
select it, and then press ( ] . 

0 ClickQ 
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The Select File dialog box 
appears. 

O Click 0 and select the folder that 
contains the destination file. 

Q Click the file to which you want 
to link. 

O Click OK. 



• The hotspot area defined by the 
selected shape is linked to the 
selected file, and the name and 
path to the file are displayed 
when the hotspot is selected. 

You can repeat steps 3 to 8 to 
add other linked areas to your 
image. 

Note: The image-map shapes do not appear when 
you open the page in a browser, but clicking 
anywhere in a hotspot area will trigger the 
corresponding link. 




Can image maps be used for geographical maps that link to 
multiple locations? 

Yes. An interactive geographical map, such as a map of Latin America, 
is a common place to see hotspots in action. You can create one by 
adding a graphic image of a map to your Web page and then defining 
a hotspot over each location to which you want to link. Use the 
Polygon tool ( [^j ) to draw around boundaries that do not follow a 
square or circular shape. Then link each hotspot to a page with 
information about the corresponding geographic region. 




Create a Link Using 
the Files Panel 



Dreamweaver provides multiple options for 
creating links. For example, you can create 
links quickly and easily using the Point to File 
button in the Property inspector to select a file 
in the Files panel. 

Your Web pages are displayed in the Files panel only if 
you have set up your Web site in Dreamweaver, an 
important first step that is covered in Chapter 2. 




Note: Make sure that both the Document window 
and the Files panel are visible and that HTML is 
selected in the Properties inspector. 

O Click and drag to select the text 
that you want to turn into a link. 

Q Click the Point to File button (fi). 

© Drag the cursor until it is over the 
file that you want to link to in the 
Files panel. 



© The text appears as a link on the 
page. 

Note: You can change the appearance of links 
and by following the steps in the section "Change 
the Color of links on a Page." 

# The name and path to the file 
you linked to are displayed in the 
Link field in the Property 
inspector. 




Open a Linked Page in a 
New Browser Window 



Creating Hyperlinks 



You can create a link that, when 
clicked, opens a new Web 
browser window to display the 
destination page. 

Opening a new browser window 
allows a user to keep the 
previous Web page open. 




New Browser Window 



O Click and drag to select the link 
that you want to open in a new 
browser window. 

Q Click the Target Q 

O Click .blank. 

© Click [Z2 to preview the page in 
a Web browser. 



0 Click the link. 

The link destination appears in a 
new browser window, and the 
page with the link remains open 
behind the linked page. 

Note: If the user's browser window is set to fill the 
entire page, the original Web page will not be 
visible when the linked page is opened. 





You can create an email link on 
your Web page. When a user 
clicks the link, it launches the 
email program on the user's 
computer, creates a message, and 
inserts the email address into the 
Address field. 




O Click to select the text or image 
that you want to turn into an 
email link. 

Q Click the Email Link button ( ). 

Note: If Q is not visible, click the Common tab 
in the Insert panel. 

The Email Link dialog box 
appears, with the selected text in 
the Text field. 



© Type the email address to which 
you want to link. 

© Click OK. 

Dreamweaver creates your email 
link, and the selected text is 
displayed as a link. 

# To test the link, you can click [4^ 
to preview the page in a Web 
browser. 

Note: For an email link to work properly, the user 
must have an email program installed on his or 
her computer. 
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Creating Hyperlinks 




You can automatically verify the links in a Web site. 
Using Dreamweaver's link-testing features, you can 
generate a report that lists any links that are broken 
within the site, as well as links to other sites that 
should be tested in a browser. 

There are many ways that links can 

it easy to find and fix them. 




O Click Site. 

© Click Check Links Sitewide. 



Dreamweaver checks all the links 
and lists all broken links, external 
links, and orphaned files. 

O Click □ and select the type of 
links you want displayed. 

Note: Dreamweaver cannot verify links to Web 
pages on external sites. 

• To correct a broken link, double- 
click to open the file, select the 
linked item, and click the Browse 
[ol to reset the link correctly. 




Change the Color 
of Links on a Page 



You can change the color of the 
links on your Web page to make 
them match the visual style of 
the other text and images on 
your page. You can also remove 
the underline under linked text. 



Change the Color of Links 



O Click Modify. 

Q Click Page Properties. 

You can also click Page 
Properties in the Property 
inspector. 

The Page Properties dialog box 
appears. 




0 Click the Active Links Pj 

changes to f). 

© Click a color from the menu using 
the tool. 

0 Repeat steps 3 and 4 to specify 
colors for Visited, Rollover, and 
Hover links. 

• You can click the Color Picker (D 
to select a custom color. 




0 Click the Underline Style Q. 

O Click Never Underline to 

remove the underline from all of 
your links. 

O Click OK. 



• The links are displayed in the 
specified link color and underline 
option. 




What color will my links be if I do not 
choose colors for them? 

Blue is the default link color in the 
Dreamweaver Document window. What 
viewers see when the page opens in 
a Web browser depends on 
their browser settings. By 
default, most Web browsers 
display unvisited links as blue, 
visited links as purple, and 
rollover links as red. 




What do each of the link options in the Page 
Properties dialog box represent? 
Link color represents the display color for a link that 
has not yet been clicked by a site visitor; Visited links 

represents the color a link changes to after 
it has been clicked; Rollover links 
represents the display color a link 
changes to as a visitor rolls a cursor 
over it; and Active links represents 
the display color a link changes to 
when a visitor is actively clicking it. 




CHAPTER 




Editing the Ta 
in a Web Page 




Tables are an ideal way to 
format tabular data, such 
as the information that you 
find in a spreadsheet. You 
can also use tables to 
create complex designs, 
even within the constraints 
of HTML This chapter 
shows you how to create 
and format tables. 



Insert a Table into a Web Page 126 

Insert Content into a Table 128 

Change the Background Color of a Table.... 130 

Change the Cell Padding in a Table 132 

Change the Cell Spacing in a Table 133 
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Insert or Delete a Row or Column 136 
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Insert a Table into / 
a Web Page i 



You can use tables to organize 
and design pages that contain 
financial data, text, images, and 
multimedia. Dreamweaver's 
layout features enable you to 
create tables for tabular data, 
simple layouts, and other design 
features. You can even insert 
tables inside other tables. 



INSERT A TABLE 

O Position where you want to insert 
a table. 

By default, the cursor snaps to the 
left margin, although you can 
change the table alignment. 

0 Click Insert. 

0 Click Table. 

• You can also click the Table □ in 
the Common Insert panel. 



The Table dialog box appears. 

© Type the number of rows and 
columns that you want in your table. 

0 Type the width of your table. 

• You can set the width in pixels or as 
a percentage of the page by clicking 
Q and selecting your choice of 
measurements. 

0 Click to select a table Header option. 

0 Click OK. 
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Editing the Table Design in a Web Page f^^^^^J^ 



• An empty table appears, aligned 
to the left by default. 

O Click B 

Q Click an alignment option. 




The table aligns on the page. 
TURN OFF THE TABLE BORDER 

O Click § 

Q Click Select Table. 

© Type the number 0 in the Border 
field. 

© Press (GHEE))- 
When you view the page in a 
Web browser, the dashed table 
border disappears. 




Why are table headers important for accessibility? 

The Table Header setting designates a row or column of a 
table as the content that describes the information in the 
rest of the table. This setting centers any text in the 
header and formats it in bold. But the Table Header 
setting does more than just change the formatting; 
it also provides additional information about 
the importance of the header content. This 
setting is used by screen readers, which are 
special Web browsers that are used by the 
blind or visually impaired, to help describe the ' 
table when the text in the table is read aloud. 




Why would I turn off table borders? 

Table borders can help to define the edges 
of a table and to organize columnar data, such 
as a financial report. However, if you want to 
use a table to arrange photos and text 
within the design of your page, 
you can have a cleaner layout if y^S 
you set the border to zero so [<s2§M 
that it becomes invisible. You 
can set the table border to one 
pixel for a slim border or try five or 
ten pixels if you want a thick border. 




Editing the Table Design in a Web Page f^^^^^JV 



The Select Image Source dialog 
box appears. 

© Click 0 and select the folder that 
contains your image. 

Q Click the image file. 

0 Click OK. 



The image appears in the table 
cell. 

• If the image is larger than the 
cell, the cell expands to 
accommodate the image. 

• You can click to select the image 
to display the image settings in 
the Property inspector. 

Note: To edit your image, see Chapter 6. 




How do I change the appearance of the content inside my 
table? 

You can specify the size, style, and color of text inside a table in the 
same way that you format text on a Web page. Similarly, you can 
control the appearance of an image inside a table in the same way 
that you can control it outside a table. For more information on 
formatting text, see Chapter 5; for more information on images, see 
Chapter 6. 




Change the Background 
Color of a Table 



You can change the background 
color of a table or only change the 
background color of a cell, a row, or 
a column. This is a great way to add 
a design element or to call attention 
to a section of a table. For more 
information on Web page 
backgrounds, see Chapter 6. 




USING THE COLOR PALETTE 

O Click to select a table or individual 
cell, or click and drag to select a 
row or column of cells. 

O Click the Bg H- 

O Click a color. 

You can click the Color Picker 
button ([©]) to select a custom 
color. 

• Click the Default Color button (Q) 
to remove a specified color. 



• The color fills the background of 
the selected cells. 

C You can also type a color name 
or hexadecimal color code into 
the color field. 

Note: To change the font color on a Web page, 
see Chapter 5. 




Change the Cell 
Padding in a Table 



You can change the cell padding 
to add space between a table's 
content and its borders. 




O Click the top center of the table to 
select it. 

© In the CellPad field in the 
Property inspector, type the 
amount of padding in pixels. 

© Press IjffHl (fTCTffll) . 



The space changes between the 
table content and the table 
borders. 

Note: Adjusting the cell padding affects all the 
cells in a table. You cannot adjust the padding of 
individual cells by using the CellPad field. 
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You can change cell spacing to 
adjust the distance that cells are 
from each other. 



Change the Cell Spacing 



O Click the top center of the table to 
select it. 

O In the CellSpace field, type the 
amount of spacing in pixels. 

Q Press f 



The cell spacing changes. 

1 1 You can change the width of the 
table or a column by clicking and 
dragging the cell borders. 

Note: Adjusting the cell spacing affects all of the 
cell borders in the table. You cannot adjust the 
spacing of individual cell borders by using the 
CellSpace field. 
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Change the Alignment 
of Cell Content 
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You can align the content in 
your table cells horizontally and 
vertically. For example, you can 
center elements or move them to 
the top or bottom of a cell. 




) Click and drag to select an entire 
column or row. 

You can press [ ) + click, or 
click and drag, to select multiple 
cells. 

) Click the Hon Q to change the 
alignment horizontally. 

) Click an alignment. 

To change the vertical alignment, 
repeat steps 1 to 3, clicking the 
Vert 0 in step 1. 



The content aligns within the 
cells. 

In this example, horizontal 
alignment is used to align the text 
in these cells to the right. 




Insert or Delete a 
Row or Column 



You can insert cells into your 
table to add content or to create 
space between elements. You can 
also delete rows or columns to 
remove them when they are not 
needed. 



INSERT A ROW OR COLUMN 

O Click the top center of the table to 
select it. 

Q Type the number of rows or 
columns that you want in the 
Property inspector. 

0 Press ( (l-BWffll) . 



: Empty rows or columns appear in 
the table. 

To add a row or column in the 
middle of a table, you can right- 
click inside an existing cell, click 
Table, and then click Insert Row 
or Insert Column from the 
menu that appears. 

> You can also click Modify, click 
Table, and then click Insert Row 
or Insert Column. 



DELETE A ROW OR COLUMN 

O Select the cells that you want to 
delete by pressing f3Xl + 
clicking or clicking and dragging 
over them. 

O Pl "ess GEJ- 



• The selected table cells disappear. 

Note: The content of a cell is deleted when you 
delete the cell. 

You can also delete cells by right- 
clicking inside the cells, clicking 
Table, and then clicking either 
Delete Row or Delete Column 

from the menu. 



• You can also click Modify, click 
Table, and then click either 
Delete Row or Delete Column. 
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Does Dreamweaver warn me if a deleted 
cell contains content? 

No, Dreamweaver does not warn you if the cells 
that you are deleting in a table contain content. 
This is because Dreamweaver 
assumes that you also want to 
delete the cell content. If you 
accidentally remove content 
when deleting rows or columns, 
you can click Edit and then click 
Undo to undo your last action. 




How do I move content around a table? 

You can move the contents of a table cell 
by clicking to select any image, text, 
or element in the cell and then 
dragging it out of the table or into 
another cell. You can also use the 
Copy and Paste commands to 
move content from one cell to 
another or to another part of a page. 





You can create more elaborate 
page designs by splitting or 
merging cells in a table to create 
larger cells adjacent to smaller 
ones. You can then insert text, 
images, and other content into 
the cells. 



SPLIT A TABLE CELL 

O Click to place your cursor in the 
cell that you want to split. 

O Click the Split Cell button © in 
the Property inspector. 

You can also split a cell by 
clicking Modify , clicking Table, 
and then clicking Split Cell. 



The Split Cell dialog box appears. 

© Click Rows or Columns to split 
the cell (Q changes to @). 

Q Type the number of rows or 
columns. 

0 Click OK. 

# The table cell splits. 
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MERGE TABLE CELLS 

O Click and drag to select the cells 
that you want to merge. 

Q Click the Merge button ([m]) in 
the Property inspector. 

• You can also merge cells by 
clicking Modify, clicking Table, 
and then clicking Merge Cells. 



• The table cells merge. 
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Can I merge any combination of 
table cells? 

No. The cells must have a 
rectangular arrangement. 
For example, you can 
merge all the cells in a 
two-row-by-two-column 
table. However, you 
cannot select three cells 
that form an L shape and 
merge them into one cell. 




Can I add as many cells as I want? 

Yes, just make sure that your final table design displays well 
on a computer monitor. For example, although it is common 
to design Web pages that are long and require visitors to 
scroll down, it can be confusing to create 
overly wide pages that require scrolling right 
or left. Keep your overall page width under 
760 pixels wide if you want it to display 
well on an 800 x 600 resolution computer 
monitor, or 1000 if you want it to display 
well at a resolution of 1024 x 760. 




Change the Dimensions 
of a Cell 



You can change the dimensions 
of individual table cells to better 
accommodate their content. As 
you enlarge and reduce cells, you 
can create more complex tables 
for more precise design control. 



O Click to select the edge of a cell 
and drag to adjust the size. 

You can also click to place your 
cursor inside any cell and then 
enter a size in the Property 
inspector. 

; You can also specify a percentage 
of the table size instead of 
specifying pixels. For example, 
you can type 25 and select 
percent in the width box. 



> Press fJJEJ (GSfflSJ)- 



• The cell and its contents readjust 
to its new dimensions. 

Note: Cell dimensions may be constrained by 
content. For example, Dreamweaver cannot shrink 
a cell smaller than the size of the content that it 
contains. 







Change the Dimensions 
of a Table 



You can change the dimensions 
of your entire table. This helps 
you to ensure that your content 
fits well within your Web page. 



Editing the Table Design 
in a Web Page 




O Click the top center of the table to 
select it. 

© Type a width. 

© Click here and select the width 
setting in pixels or a percentage 
of the screen. 

© Press ( Si (l-BWIffl) . 



The table readjusts to its new 
dimensions. 

Note: Table dimensions may be constrained by 
content. For example, Dreamweaver cannot shrink 
a table smaller than the size of an image that it 



If you do not specify a height or 
width, the table automatically 
adjusts to fit the space that is 
available on the user's screen. 





Using Percentages 
for Table Width 



You can specify the size of a 
table using percentage instead of 
pixels. As a result, the table 
automatically adjusts to fit a 
user's browser window size. 

When you define a table size as a percentage, it adjusts 
to fill that percentage of a user's browser window. If 
the new table is inside another table or other 
container, it adjusts within the container's boundaries. 




SET TABLE WIDTH AS A 
PERCENTAGE 

O Position the where you want to 
insert the table. 

By default, the cursor snaps to 
the left margin, although you can 
change the table alignment. 

Note: For instructions on creating a table, see the 
section "Insert a Table into a Web Page." 



0 Click Insert. 
0 Click Table. 



The Table dialog box appears. 

O Type the number of rows and 
columns that you want in your 
table. 

0 Type the width of your table. 
0 Click Q and select percent. 
0 Click OK. 
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An empty table appears, aligned 
to the left by default, and fills the 
available window, based on the 
percentage width that you 
specified. 

• You can click here and enter a 
different percentage. 



CENTER A TABLE 

O Click the top center of the table to 
select it. 

Q Click the Align Q. 

© Click Center. 

• The table aligns in the center of 
the page. 




What is a spacer image? 

A spacer image is a transparent GIF image file that is used 
as a filler to invisibly control spacing on a Web page. 
Essentially, you insert a spacer image into a table cell and 
then use the height and width attributes to control the 
size of the image. The invisible spacer image ensures that 
blank spaces on your page remain consistent. ^ mm ^ 
This is important because Web browsers CD/If FR 
sometimes display elements closer together , 3f itvCIl 
if there is no text or image to maintain ' — IMfrfC 
consistent spacing within the design. IrlAuE 



How do you make a spacer image? 

You can create your own spacer image in an 
image-editing program, such as Adobe 
Photoshop or Fireworks. Create a new image 
and set the background color to transparent. 
Save it as a GIF file in your Web site 
folder. An ideal size for a spacer ^*~^^ 
image is 10 pixels by 10 pixels; i~*¥¥) 
however, it can be any size. You 
can resize it in Dreamweaver to 1 v * 
fit the space that you want to fill. 



CHAPTER 




Creating 
with Frames 




You can divide the display 
area of a Web browser into 
multiple panes by creating 
frames. Frames offer 
another way to organize 
information by splitting up 
your pages. For example, 
you can keep linked 
content visible in one 
frame and target it to open 
in a different frame within 
the same browser window. 



v. 
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Set Up a Frame 

You can create a framed Web site in Dreamweaver 
by dividing the Document window horizontally or 
vertically one or more times. Each frame is 
composed of a different Web page that you can link 
independently. All pages in a frameset are identified 
in a frameset page, and you must save them 
separately. 
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How Frames Work 

Frames on a page operate independently of one 
another. As you scroll through the content of one 
frame, the content of the other frames remains fixed. 
You can create a link in one frame and target the link 
to open in any other frame. 
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Dreamweaver includes a number of 
features designed to make it easy to 
work with frames. One of the most 
important is the Frames panel. 

As you work with frames, keep the Frames panel open. It is 
a handy tool for helping you target and identify which 
frames you are working on as 



) Click V 
) Click Frames. 



• The Frames panel appears. 

• You can click in a corresponding 
frame in the Frames panel to 
select it in the workspace. 

• The Properties inspector displays 
the settings for the selected 
frame. 

© Click the Visual Aids button 

© If there is no [7] next to Frame 
Borders, click to select it. 





Insert a Predefined 
Frameset 



You can easily create popular 
frame styles using the predefined 
framesets. You can access frame 
styles from the Frames tab in the 
Insert panel. They are also 
available from the Page from 
Sample framesets that are 
featured in the New Document 
dialog box. 



Insert a Predefined Frameset 



O Click File. 

O Click New. 

The New Document dialog box 
appears. 




0 Click Page from Sample. 
O Click the Frameset Q. 

0 Click a frameset design. 

A preview of the selected 
frameset is displayed here. 

0 Click Create. 

The Frame Tag Accessibility 
Attributes dialog box opens. 



Q Click the frame that you want to 
select. 

Q Type a title for the frame or 
accept the frame title 
automatically assigned. 

Q Click OK. 

([•) Repeat steps 7 to 9 for each 
frame. 

• You can turn disability features 
off in Dreamweaver's preferences 
by clicking this link. 



Dreamweaver automatically 
creates all the frames in the work 
area and assigns each frame a 
name. 

• The frameset properties appear 
in the Property inspector. 

© Click File. 

© Click Save All. 

Note: You must save each frame in a frameset 
individually in the Save As dialog box. 




Can I save individual pages in my frameset 
separately? 

Saving a frameset requires you to save each of the 
individual pages that appear in the frames, as well as 
the frameset that defines how each frame appears. 
However, you can save any of the pages 
within a frameset individually. Simply click ir jm^'j 
to place in the frame area that you nil "Hp I 
want to save, click File, and then click 
Save. Dreamweaver saves only the page 
that you selected. 




What steps do I take if I want to change 
just one frame? 

You can open any existing page in an area of a 
frameset. Place in the frame that you want to 
change, click File, and then 
click Open to open an existing j 
page. You can also click File 
and then click New to create a 
new page in any frame area. 





You can split a Document window 
vertically to create a frameset with 
left and right frames, or you can split 
it horizontally to create a frameset 
with top and bottom frames. You can 
also combine them to create more 
complex frames or add frames to a 
predefined frameset. 



O Click Modify. 

@ Click Frameset. 

O Click a Split Frame command. 





The window splits into two 
frames. If content existed in the 
original page, it shifts to one of 
the new frames. 

# Scrollbars appear if the content 
extends outside the frame 
borders. 
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You can subdivide a frame of an 
existing frameset to create nested 
frames. With nested frames, you 
can organize the information in 
your site in a more complex way. 




O Click inside the frame that you 
want to subdivide. 

© Click Modify. 

© Click Frameset. 

© Click a Split Frame command. 



G Dreamweaver splits the selected 
frame into two frames, creating a 
nested frame. 

You can continue to split your 
frames into more frames. 




Change the Attributes 
of a Frame 



You can change the dimensions 
of a frame to display the 
information more attractively 
inside it. You can also change 
scrolling and other options in 
the Property inspector. 



SPECIFY A COLUMN SIZE 

O Click to select the frame that you 
want to change in the Frames 
panel. 

Note: If the Frames panel is not open, click 
Window and then click Frames. 



Q Click to select the border of the 
frame. 

@ Drag to adjust the size. 

The column adjusts to the 
specified width. 
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SET FRAME ATTRIBUTES 

O Click to select the frame that you 
want to change in the Frames 
panel. 

The Frame attributes are 
displayed in the Property 
inspector. 

• Click here to expand the Property 
inspector. 



0 Click 

O Click a Scroll attribute. 

The frame scrollbar changes, 
based on the option that you 
selected. 

# You can also adjust the attributes 
for the border color and visibility 
in the Property inspector. 
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Is there a shortcut for changing the 
dimensions of frames? 

Yes. You can click and drag a 
frame border to quickly adjust 
the dimensions of a frame. 
When you select the border of 
a frame, its attributes are 
displayed in the Property 
inspector. 




Why would I want to change scrolling 
options? 

When the content in a frame 
exceeds the dimensions of a Web /^jf iMES^^ 
browser window, you should 
include a scrollbar so that visitors | 
can view all your content. If you 
set the Scroll attribute to Yes in 
the Property inspector, the scrollbar 
is always visible. If you set it to Auto, a 
scrollbar appears only when needed. 





You can insert text, images, and 
other content into a frame just 
as you would in an unframed 
page. You can also link existing 
pages into a frameset. 



OPEN AN EXISTING FILE IN A 
FRAMESET 

O Click to position ^ in the frame 
where you want to open an 
existing document. 

Q Click File. 

© Click Open in Frame. 



The Select HTML File dialog box 
appears. 

Q Click 0 and select a folder. 

0 Click the file that you want to 
open in the frame. 

O Click OK. 
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; The selected page appears in the 
frame area. 

• If the content extends beyond the 
frame, scrollbars automatically 



ADD NEW CONTENT TO A 
FRAME 

O Click inside the frame where you 
want to add text. 

Q Type the text. 

• You can also add images, div 
tags, or other elements by 
clicking the corresponding 
button, such as the Insert 
Images button ([fflD or the 
Insert Div button 0 from 
the Common Insert panel. 



Can I link a frame to a page on the Web? 

Yes. You can link to an external 
Web page address by using 
the Link field in the Property 
inspector. However, 
unlike other pages, you 
must specify the target 
frame where you want 
the page to open. To create 
targeted links, see the section 
"Create a Link to a Frame." 




Can I add as much content as I wa 
frame page? 

Yes. A frame page is just like any other 
page. You can add as much text, 
and as many images and 
multimedia files, as you want. 
However, if you have a small 
frame, you can have better 
design results by limiting the text 
within that frame page to fit the 
small space. 





You can delete existing frames to 
change, simplify, or expand a 
design. 

If you have saved the page displayed in 
the frame before you delete it, the 
HTML file is not deleted even though 
the frame is removed. 
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O Position the on the border of 
the frame that you want to delete 
(t^ changes to %). 

© Click and drag the border to the 
edge of the window. 



Dreamweaver deletes the frame. 

The deleted frame is also 
removed from the Frames panel. 

If the Frames panel is not open, 
you can click Window and then 
click Frames to display it. 
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Before you can target links in one frame 
to open in another frame, you need to 
ensure that all your frames have names. 
You use frame names to identify where 
the linked page should open in the 
frameset. Frame names are visible in the 
Frames panel. 




If the Frames panel is not open, 
you can click Window and then 
click Frames to display it. 

O Click to select the frame that you 
want to name in the Frames 
panel. 

© Type a name for the frame. 

You can rename any frame by 
deleting the name in the Property 
inspector and then typing in a 
new name. 

© Press 



The new name of the frame 
appears in the Frames panel and 
the Property inspector. 






You can create links in one frame 
that open a page in another 
frame. This is a common 
technique for navigation rows 
and other links that you want to 
continue to display when the 
linked page opens. For more 
information about creating links, 
see Chapter 7. 




O Click to select the text or image 
that you want to turn into a link. 

© Click [3] in the Property 
inspector. 




The Select File dialog box opens. 

) Click [▼] and select the folder 
containing the page to which you 
want to link. 

) Click the file. 

) Click OK. 



0 Click the Target Q 

Q Click the name of the frame 
where you want the target file to 
open. 

Dreamweaver automatically 
names frames when they are 
created. Frame names are visible 
in the Frames panel. 

© Click to preview the page in 
a Web browser. 

Note: To preview a page in a Web browser, see 
Chapter 2. 



• When you open the framed page 
in a Web browser and click the 
link, the destination page opens 
inside the targeted frame. 
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How do I create a link that opens a new 
page, outside of the frameset? 

When you target a link, you can click _top from 
the Link drop-down menu in 
Property inspector, instead of a 
frame name, to open the linked 
page in its own new browser i 
window. This action takes the 
user out of the frameset and is 
especially recommended when 
linking to another Web site. 




Can I target a link to another Web site? 

Yes. You can create a link to another Web site from 
a framed page by entering the URL in 
the Link field in the Property 
inspector. However, use this 
feature with care. Many Web site 
owners consider it bad form (or 
worse) to display their Web pages ^ 
within the frames on your Web site. ' 
Also, framing other Web sites can be 
confusing to visitors. 
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You can modify the appearance 
of your frame borders to make 
them complement your design. 
One way is to specify the color 
and width of your borders. You 
can also turn them off so that 
they are not visible when the 
frameset is displayed in a Web 
browser. 



SET BORDER COLOR AND 
WIDTH 

O Click the corner of an outside 
frame border to select the entire 
frameset. 

0 Click the Borders Q. 

0 Click Yes or Default to turn on 
borders. 

Q Type a border width in pixels. 

0 Click the Border color Pj 

changes to f). 

0 Click a color. 

© The frame border appears at the 
specified settings. 

You can override the frameset 
settings at the individual frame 
level if you want to change the 
settings to alter the border size or 
color of a single frame. 

# To do so, click the corresponding 
frame area in the Frames panel 
to select that individual frame. 
Then change the settings in the 
Property inspector. 
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TURN OFF BORDERS 

O Click the corner of an outside 
frame border to select the entire 
frameset. 

Q Click the Borders Q. 

0 Click No. 



• The frame border is removed and 
will not be displayed in a Web 
browser. 

• A gray border may still be visible in 
Dreamweaver if Frame Borders is 
selected on the Visual Aids menu. 

• Scrollbars will be displayed unless 
turned off. 

Links open in the targeted frame, 
even with borders turned off. 

• You can click [Z2 to preview the 
page in a browser. 




Why would I want to make my frame 
borders invisible? 

Turning borders off can disguise the fact 
that you are using frames in the 
first place. If you want to 
further disguise your frames, . 
you can set the pages inside 
your frames to the same 
background color. To change 
background colors, see 
Chapter 6. 




What if the frames do not look right in a Web 
browser when I preview them? 

Because pages can be displayed differently in different 
Web browsers than in Dreamweaver, you 
may want to make some adjustments to 
your frames after previewing them. If 
you find that the content is not exactly 
where you want it or if there are other 
problems with your frames, then simply ' 
return to Dreamweaver, click and drag 
to adjust frame borders, and make any 
necessary adjustments to your content. 




Control Scrollbars 
in Frames i 



You can control whether scrollbars 
appear in your frames. Although hiding 
scrollbars enables you to have more 
control over the presentation of your 
Web site, it can also prevent the display 
of some of your text, images, or other 
content if they take up more room than 
is available in a browser window. 




O Click the frame in the Frames 
panel to select it. 

0 Click the Scroll Q 

Q Click a Scroll setting. 

You can click Yes to 
keep scrollbars on, No to turn 
scrollbars off, or Auto to 
keep scrollbars on when 
necessary. 

In most Web browsers, Default 
and Auto settings have the same 



© The frame appears with the new 
setting. 

In this example, scrollbars are 
turned off in the main frame. 

Note: Turning scrollbars off will prevent visitors to 
your site from being able to scroll to view the 
entire frame if the content exceeds the browser 




Control Resizing 
in Frames 



By default, most browsers allow 
users to resize frames by clicking 
and dragging frame borders. 

You can prevent users from resizing the frames 
of a Web site. However, depending on the size 
of their monitor, this may make it more difficult 
for them to view all your content. 



Control Resizing in Frames 



Creating Pages with Frames 




O In the Frames panel, click the 
frame to select it. 

© Click the No resize check box to 
remove the check mark if one is 
visible ([7] changes to QJ- 

© Click [T^ to preview the page in 
a Web browser. 

Note: To preview a page in a Web browser, see 
Chapter 2. 



The browser allows the user to 
resize the frame. 

When you select the No resize 

option, the browser prevents the 
user from resizing the frame. 
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Creating Web-Based 
Forms 




You can make it easy for 
your Web site visitors to 
send you information by 
creating forms on your Web 
pages. This chapter shows 
you how to create forms 
with different types of 
fields, buttons, and menus. 
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You can add forms to your Web 
site to make it more interactive, 
thus allowing viewers to enter 
and submit information to you 
through your Web pages. 



Note: In order for a form to function, you 
need to have a script on your Web server 
to process the form information. 
Programmers generally create form 
scripts, and some scripts may be available 
through your service provider. 




Create a Form 

You can use Dreamweaver to construct a form by 
inserting text fields, drop-down menus, check boxes, 
and other interactive elements into your page. You 
can also enter the Web address of a form handler, 
or script, in Dreamweaver so that the information 
can be processed. Visitors to your Web page fill out 
the form and send the information to the script on 
your server by clicking a Submit button. 




Process Form Information 

Form handlers or scripts are programs that process 
the form information and execute an action, such as 
forwarding the information to an email address or 
entering the contents of a form into a database. 
Although many ready-made form handlers are 
available for free on the Web, they generally require 
some customization. Your Web-hosting company may 
have forms available for you to use with your site. 
You can often find them by searching your hosting 
company's Web site or by calling tech support. 





Creating Web-Based Forms 



You set up a form on your Web page by first creating 
a form container. The form container defines the area 
of the form. You then place any text fields, menus, or 
other form elements inside the form container. 

You associate the script or form handler by 
selecting the form container and typing the 
name in the Property inspector. 




O Click where you want to insert 
your form. 

Q Click Insert. 

© Click Form. 

O Click Form. 



I A red box appears, indicating that 
the form container is set up. To 
build the form, add elements 
inside the box. 

0 Type the form address, using the 
name of the script and its location 
on your Web server. 

O Click B 

O Click either POST or GET. 

Use the command required by 
your script or form handler. 




You can add a text field to enable viewers to 
submit text through your form. Text fields 
are probably the most common form 
element, enabling users to enter names, 
addresses, brief answers to questions, and 
other short pieces of text. 



Add a Text Field to a Form 




O Click inside the form container 
where you want to insert the text 
field. 

0 Click Q 

O Click Forms. 

O Click the Text Field button © 
on the Forms Insert panel. 







Contact Information 













The Input Tag Accessibility 
Attributes dialog box appears. 

0 Type a one-word ID. 

0 Type the text that you want for 
the label. 

O You can select the Style and 
Position attributes that you want 
(O changes to (§)). 

• Entering an access key and tab 
index can make your site more 
accessible. 

O Click OK. 



• A text field appears. 

O Your label text appears. 

• You can click Multi line if you 

want more than one line 
available for text. 

• You can change the assigned ID 
of the text field. 

© Type an initial value for the text 
field. 

Q Type a character width for the 
text field. 

You can type a maximum number 
of characters. 

• The initial value appears in the 
text field. 

• The width of the text field 
changes based on the value that 
you entered in the Char width 
field. 

flj) Click and drag to select the label 
text. 

Q Select any of the label formatting 
options in the Property inspector. 

• Dreamweaver applies the 
formatting to the label text. 




Can I define the style of text that appears 
in the text field? 

By default, the browser determines what style of 
text appears in form fields. It is not 
possible to format this type of text 
with plain HTML. You can use 
style sheets to manipulate the 
way the text in the form fields 
appears. You can find more 
information about style sheets 
in Chapter 12. 




Can I create a text field with multiple lines? 

Yes. You can create a text field and use the 
Property inspector options to make it a 
field with multiple lines. You 
can also create a text 
area, which has multiple 
lines by default. You can 
insert a text area just as you ( 
insert a text field, by 
clicking the Textarea 
button d D in the Forms 
Insert panel. 




Add a Check Box 
to a Form 



Check boxes enable you to 
present multiple options in a 
form and make it easy for a user 
to select one, several, or none of 
the options. 



Add a Check Box to a Form 




O Click inside the form container 
where you want to insert the 
check box. 

O Click g. 

O Click Forms. 

© Click the Checkbox button ( ■ ) 
on the Forms Insert panel. 



The Input Tag Accessibility 
Attributes dialog box appears. 

0 Type a one-word ID. 

0 Type the text that you want for 
the label. 

O You can select the Style and 
Position attributes that you want 
(O changes to (§)). 

# Entering an access key and tab 
index can make your site more 
accessible. 



O Click OK. 




# The check box and label appear 
on the page. 

© Repeat steps 2 to 7 until you 
have the number of check boxes 
that you want on your form. 



Q Click a check box to select it. 

© Click to select an Initial state 

option. 

O You can specify other attributes, 
such as the class, ID, or checked 
value. 

• You can click to select the other 
check boxes, one at a time, and 
specify the attributes of each 
separately. 

# You can format the label text 
using the Property inspector. 
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When should I use check boxes? 

Check boxes are ideal 
when you want visitors 
to be able to select 
more than one 
option. Keep in mind 
that you may want to 
include the message 
"Check all that apply." 




When should I use radio 
buttons? 

When you want visitors to 
select only one option 
from a list of two or more 
options, radio buttons are 
the best choice. You can 
set up your radio buttons 
so that it is not possible to 
select more than one 
option. 




Add a Radio Button 
to a Form 



You can allow visitors to select 
one of several options by adding 
a set of radio buttons to your 
form. With radio buttons, a user 
cannot select more than one 
option from a set. 




Add a Radio Button to a Form 




O Click inside the form container 
where you want to insert a radio 
button. 

O Click Q 

O Click Forms. 

O Click the Radio Button button 
(Q) on the Forms Insert panel. 



The Input Tag Accessibility 
Attributes dialog box appears. 

0 Type a one-word ID. 

0 Type a label. 

You can select the Style and 
Position attributes that you want 
(O changes to (§)). 

• Entering an access key and tab 
index can make your site more 
accessible. 
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O Click OK. 




# A radio button and a label appear 
on the page. 

© Repeat steps 2 to 7 until you 
have the number of radio buttons 
that you want in your form. 



Q Click a radio button. 

© Click to select an Initial state 

option. 

C You can specify other attributes, 
such as the checked value, ID, 
and class. 

Q Click to select the other radio 
buttons one at a time and specify 
attributes for each individually. 

# You can format the label text 
using the Property inspector. 
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What happens if I want visitors to select 
multiple options? 

If you want your users to be able to select 
multiple options, radio buttons 
are not your best choice. If you 
want to enable your users to 
select multiple options and to ' 
be able to deselect an option 
after it is selected, your best 
choice is to use check boxes 
instead of radio buttons. 




Are there alternatives to using check boxes 
or radio buttons? 

Yes, there are alternatives 
such as menus and lists. 
Instead of using check 
boxes, you can use multiselect 
lists so that users can select 
more than one item from a 
list. You can replace a radio 
button with a menu that allows 
only one choice from a list. 




Add a List/Menu 
to a Form 



List/menus enable users to 
choose from a predefined list of 
choices. List/menus, sometimes 
called drop-down boxes, are 
similar to check boxes in that 
users can choose one or more 
options. 




Add a List/Menu to a Form 



O Click inside the form container 
where you want a menu or list. 

O Click g. 

© Click Forms. 

© Click the List/Menu button ( ) 
on the Forms Insert panel. 
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The Input Tag Accessibility 
Attributes dialog box appears. 

0 Type a one-word ID. 

0 Type a label. 

You can select the Style and 
Position attributes that you want 
(O changes to (§)). 

• Entering an access key and tab 
index can make your site more 
accessible. 

O Click OK. 



A blank menu appears in your form. 
Q Click the menu to select it. 
0 Click List Values. 

The List Values dialog box appears. 

© Type an item label and a value for 
each menu item. 

# You can click [+] or Q to add or 

delete entries. 

You can select an item and click \±} or 
H to reposition the item in the list. 

© Click OK. 



The entered values appear in the 
list box. 

© Click the item that you want to appear 
preselected when the page loads. 

Dreamweaver applies your 
specifications to the menu. 
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What determines the height a 
menu or list? 

The widest item determines the 
width of your menu or list. 
To change the width of the 
menu, you can change the 
length of your item 
descriptions. You can set the 
height greater than 1 so that 
visitors to your site can see 
more of your list items. 




Can I choose more than one item from 
menu? 

You can only select one item from 
a menu because of its design. If 
you want more than one 
selection, use a list and set it to 
allow multiple selections. 




You can use a form button for 
many things, but its most common 
use is to add a Submit button at 
the end of a form. You need a 
Submit button to enable users to 
send the information that they 
have entered in the form to the 
specified script or form handler. 
You can also add a Reset button to 
clear the contents of a form. 



Add a Button to a Form 




ADD A SUBMIT BUTTON 

O Click inside the form container 
where you want to add the 
Submit button. 

0 Click 0. 

0 Click Forms. 

O Click the Button button Q in 
the Forms Insert panel. 



The Input Tag Accessibility 
Attributes dialog box appears. 

0 Type a one-word ID. 

Note: Most Submit buttons do not include a label. 

C You can select the Style and 
Position attributes that you want 
( changes to (§)). 

• Entering an access key and tab 
index can make your site more 
accessible. 



0 Click OK. 




CHAPTER 




Using Library 
and Templates 




You can save time by 
storing frequently used 
Web page elements as 
library items. You can 
create sites even more 
efficiently by saving 
complete page layouts as 
templates. This chapter 
shows you how to use 
these features to quickly 
create consistent page 
designs that can be 
updated automatically. 
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View Library Items and Templates 181 

Create a Library Item 182 

Insert a Library Item 184 

Edit and Update a Library Item on Your 
Web Site 186 

Detach Library Content for Editing 188 

Create a Template 190 

Set an Editable Region in a Template 192 

Create a Page from a Template 194 

Edit a Template to Update Web Pages 

Created with It 196 
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Introducing Library Items 
and Templates 



With library items and 
templates, you can avoid 
repetitive work by storing copies 
of page elements and layouts 
that you frequently use. You can 
access the library items and 
templates that you create 
through the Assets panel. 




Library Items 

You can define parts of your Web pages that are 
repeated in your Web site as library items. This saves 
you time because whenever you need a library item, 
you can just insert it from the Asset panel instead of 
re-creating it. If you make changes to a library item, 
Dreamweaver automatically updates all instances of 
the item across your Web site. Good candidates for 
library items include advertising banners, company 
slogans, copyright messages, and any other feature 
that appears many times across your Web site. 




Templates 

You can define entire Web pages as templates and 
then save them to use later when you build new 
pages. Templates can also help you maintain a 
consistent page design throughout a Web site. When 
you make changes to a template, Dreamweaver 
automatically updates all the pages in your Web site 
that were created from that template. The ability to 
make global updates to common areas of a template, 
such as a navigation bar, makes it faster to make 
changes to a site. 
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View Library Items 
and Templates 



Using Library Items and Templates 




You can access the library items and templates 
in a Web site through the Assets panel. You 
can also insert items by dragging them from 
the Assets panel onto a Web page. 

Note: You must define a site in Dreamweaver 
before you can use these features. The site- 
n process is covered in Chapter 2. 




VIEW THE LIBRARY 

O Click Window. 

O Click Assets. 

1 1 The Assets panel opens. 

O Click the Library button ([qjD. 

• The Library window opens in the 
Assets panel. 



VIEW TEMPLATES 

O Click Window. 
Q Click Assets. 

• The Assets panel opens. 

O Click the Template button ([□]) to 
view the templates. 

• The Templates window opens in 
the Assets panel. 




Using Library Items and Templates 



• A new, untitled library item 
appears in the Library window. 

@ Type a name for the library item. 

0 Press [ 



• The named library item appears 
in the Assets panel. 

Note: Defining an element as a library item 
prevents you from editing it in the Document 
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items? 

Anything that appears multiple times in a Web site is a 
good candidate to become a library item. 
These elements include navigation 
menus, contact information, and 
disclaimers. Any element that appears j 
in the body of an HTML document, 1 ^ 
including text, images, tables, forms, 
layers, and multimedia, may be defined ' 
as a library item. 




Can I use multiple library items on the 
same HTML page? 

There is no limit to the 
number of library items 
that you can use on a 
page. For example, you 
can create a library item 
for the logo at the top of 
the page and another for 
the copyright at the bottom. 





You can insert any library item 
onto a page to avoid having to 
re-create it. This ensures that the 
element is identical to other 
instances of that library item 
and that it can be easily updated 
if you make changes to the 
library item later. 




O Click Window. 
O Click Assets. 



The Assets panel opens. 

O If the Library window is not open 
in the Assets panel, you can click 
P to view it. 

© Position where you want to 
insert the library item. 

Q Click the library item. 

• The library item appears at the 
top of the Library window. 




Using Library Items and Templates 




0 Right-click the library item. 

0 Click Insert. 

You can also click and drag 
library items from the Library 
window to the page to insert 
them. 



# Dreamweaver inserts the library 
item in the Document window. 




How do I edit a library item that has been inserted 
into a page? 

Instances of library items in your page are locked and cannot I 
be edited within the page. To edit a library item, 
you must either edit the original version of 
that item from the library or detach the 
library item from the library to edit it 
within the page. However, if you detach 
the library item from the library, the item is 1 
no longer a part of the library, and it is not 
updated when you change the library item. 




Can I make an element a library item 
after I have used it on a few pages? 

Yes. You can save any item to the library at 
any time. If you want to make 
sure that all instances of the 
item are attached to the 
library item, simply open 
any pages where you 
have already applied the 
item, delete it, and then 
insert it from the library. 




Edit and Update a Library 
Item on Your Web Site 



You can edit a library item and 
then automatically update all the 
pages in your Web site that 
feature that item. This feature can 
help you save time when updating 
or redesigning a Web site. 




O Double-click the library item. 

The library item opens in a new 
window. 

Q Edit any element in the library 
item. 

You can add or delete text, insert 
images, and make any other edits 
to a library item that you can 
make to a Web page. 

In this example, the year 2008 is 
changed to 2009 in the copyright 
library item. 



© Click File. 
© Click Save. 




The Update Library Items dialog 
box appears, asking if you want 
to update all instances of the 
library item in the site. 

0 Click Update. 




i_0 



The Update Pages dialog box 
appears, showing the progress of 
the updates. 

0 After Dreamweaver updates the 
site, click Close. 

All pages where the library item 
appears are updated. 

• Changes are also made to the 
stored library item and are visible 
in the Assets panel. 




What do my pages look like after I have edited 
a library item and updated my Web site? 

When you edit a library item and choose to update 
any instances of the library item that are already 
inserted into your Web pages, all those 
instances are replaced with the 
edited versions. By using the 
library feature, you can make a 
change to a single library item 
and have multiple Web pages 
updated automatically. 




Can I undo an update to a library item? 

Technically, no. When you update 
pages with the library feature, the 
Undo command does not undo 
all the instances of these 
changes. However, you can go 
back to the Assets panel, open 
the library item, change it back to 
the way it was, and then apply those 
changes to all the pages again. 



Detach Library 
Content for Editing 



You can detach an inserted library item 
from the original stored library item and 
then edit it as you would any other 
element on a Web page. If you detach a 
library item, you can no longer make 
automatic updates when you change the 
original stored library item. 




O Click to select the library item 
that you want to edit 
independently. 

© Click Detach from original. 



A warning dialog box appears. 

You can prevent the warning 
from appearing each time that 
you perform this action by 
clicking Don't warn me again 

(□ changes to 0). 

0 Click OK. 
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The element is no longer a library 
item and has no distinctive 
highlighting. 

© Click where you want to edit the 
library item and make any edits 
that you want. 

• You can add, delete, and format 
text. In this example, new text is 
added, and the text is made bold. 



• Dreamweaver applies the editing 
to the text, image, or other 
element within the page. 

Note: Editing a detached library item has no 
effect on library items that are used on other 
pages. 





When would I use the Detach from Original 
command? 

This command is useful when you want to create an 
element in a page that will be similar to an element that 
you have saved as a library item. For example, 
if you use a copyright line that includes the 
photographer's name on every page of a 20- 
page photo gallery and then you decide to 
add one page with a photo taken by a 
different photographer, you could detach the \ 
library item so that you could change only 
that instance of the copyright line. 




Can I reattach a library item? 

Not exactly, but you can always reinsert a 
library item into a page and then delete 
the unattached library item. As a result, 
any changes that you make 
to the stored version are 
applied to the newly 
inserted version. Inserting 
a library item again may 
be faster than making the 
updates manually. 




Templates are one of the most 
powerful and time-saving features in 
Dreamweaver because they enable you 
to create page designs that can be 
reused over and over again. Templates 
can also help you create more 
consistent designs for your pages. 




Note: To create templates for your Web pages, 
you must already have defined a local Web site. To 
set up a local Web site, see Chapter 2. 

O Click File. 

0 Click New. 




0 Click Blank T 

O Click HTML template. 

You can choose another template 
type if you are working on a site 
that uses another technology. 

0 Click a Layout option. 

O Click Create. 



Using Library Items and Templates 




Q Design a new page as you would 
for any other Web page, using 
the features that you want for 
your template. 

You can add placeholder images 
and text to indicate where 
content is to be added to the 
pages created from the template. 

O Click File. 

Q Click Save. 

The Save As Template dialog box 
appears. 



© Click Q and select your site 
name. 

Type a name for the template. 

© Click Save. 

New templates appear in the 
Templates window. 

If a template folder does not 
already exist, Dreamweaver 
automatically creates one, and it 
appears in the Files panel. 

Note: To make the template functional, define 
editable regions to modify content. 
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Can I create as many pages as 
from a template? 

Yes. There is no limit to the 
number of pages that you can 
create from one template. In 
fact, the more pages that you 
plan to create using the same 
design, the more reason you 
have to save that design as a 
template, so it does not have to 
be re-created each time. 




How do you edit a page that is created with a 
template? 

After you create a new Web page from a template, you 
can only change the parts of the new page 
that are defined as editable. To change 
locked content, you must edit the 
original template file. For more 
information about creating editable 
regions in a template, see the 
following section, "Set an Editable 
Region in a Template." 



Set an Editable Region 
in a Template 



After you create a Web page template, 
you must define which regions of the 
template are editable. When you create a 
page from the template, you can then 
edit these regions. Any areas of the 
template that are not set as editable 
cannot be changed in any pages that 
you create from the template. 




Set an Editable Regie 



O Click Window. 
0 Click Files. 

The Files panel appears. 

Q Click the Templates + 

(+ turns to -). 

© Double-click a template name to 
open it. 

You can also open a template by 
double-clicking the template 
name in the Assets panel. 



The template opens in the work 
area. 

0 Click to select an image or other 
element or click and drag to 
select text that you want to define 
as editable. 

O Click Insert. 

O Click Template Objects. 

O Click Editable Region. 
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The New Editable Region dialog box 
appears. 

Q Type a name for the editable region 
that distinguishes it from other 
editable regions on the page. 



Note: You cannot u 
in the name. 

fli) Click OK. 



;e the characters &, " ', <, or > 




A light-blue box indicates the 
editable region, and a tab shows 
the region name. 

Q Repeat steps 5 to 10 for all the 

regions on the page that you 
want to be editable. 




What parts of a template should be defined 
as editable? 

You should define as editable any part of your 
template that you want to 
change from page to page. This 
can include headlines, stories, 
images, and captions. In 
contrast, you should lock site 
navigation, disclaimers, and 
copyright information, which 
should be the same on all pages. 




Can I use library items in my template 
pages? 

Yes, you can use library items in templates. This is 
useful when you want to insert 
an item on pages that are made 
from the template. When you 
edit them, the library items are 
updated in the actual templates, 
and then in all of the pages that 
are created from those templates. 




Create a Page 
from a Template 



You can create a new Web page 
based on a template that you 
have already defined. This step 
saves you from having to rebuild 
all the generic elements that 
appear on many of your pages. 



Create a Page from a Template 



O Click File. 
0 Click New. 



The New Document dialog box 
appears. 

0 Click Page from Template. 

© Click the name of the Web site. 

© Click the template. 

A preview of the template 
appears. 

0 Click Create. 
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Dreamweaver generates a new 
page from the template. 

• The editable regions have blue 
labels and are surrounded by 
blue boxes. 

Q Insert images as needed into the 
editable regions. 

© Type content as needed in the 
editable regions. 

Note: Only editable areas can be altered in a 
page created from a template. 



0 Click File. 

© Click Save. 

Dreamweaver saves the new 
page, based on the template. 




How do I detach a page from a 

template? 

O Click Modify. 

© Click Templates. 

© Click Detach from Template. 

The page becomes a regular document 
with previously locked regions now fully 
editable. Edits to the original template 
no longer update the page. 




Edit a Template to Update 
Web Pages Created with It 



When you make updates to a 
template file, Dreamweaver 
allows you the option to 
automatically update all the 
pages that are created by the 
template. This enables you to 
make global changes to your 
Web site design in seconds. 



O Click Window. 
0 Click Files. 

The Files panel appears. 

O Click the Templates + 

(+ turns to -). 

Q Double-click the template name 
to open it. 

You can also open a template by 
double-clicking the template 
name in the Assets panel. 



© Click an area of the template that 
is not an editable region. 

Note: Only locked regions of a template can be 
used to make updates to pages created from the 
template. 

r ; In this example, a new navigation 
menu link is added for Gallery 3. 
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} Press Q) fl»ffffiff!ll) + 0 to 
save the page. 

The Update Template Files dialog 
box appears, listing all files based 
on the selected template that will 
be updated. 

> Click Update. 



The Update Pages dialog box 
appears. 

© Click Show log (Q changes 
to©. 

• The results of the update process 
appear in the Status pane. 

Q After Dreamweaver updates the 
Web site, click Close. 

All the pages that use the 
template are updated to reflect 
the changes. 





How does Dreamweaver store page 
templates? 

Dreamweaver stores page templates in a folder 
called Templates inside the local site folder. You 
can open the templates by clicking 
File and then clicking Open. In the 
Open dialog box, click [£] and 
click the Template folder. You can 
click a template file to select it. 
You can also open templates from 
inside the Assets panel. 




What are editable attributes? 

Editable attributes enable you to change the 
attributes of an element in the Property inspector. 
For example, you can change 
image attributes, such as 
alternative text, alignment, or size. 
To use this feature, select an 
element, such as an image, click 
Modify, then click Templates, 
and then click Make Attribute 
Editable. 
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CHAPTER 




Creating and Applying 
Cascading Style Sheets 




This chapter shows you 
how to use cascading style 
sheets (CSS) to create and 
apply formatting. Cascading 
style sheets can save you a 
lot of tedious formatting 
time, especially if you 
format big Web sites. 
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Customize an HTML Tag 210 
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Dialog Box 212 

Create an External Style Sheet 214 

Attach an External Style Sheet 216 

Edit an External Style Sheet 218 



Introducing Cascading 
Style Sheets 




Format Text 

CSS enables you to create as many different style 
sheets as you want. You can then use them to 
format text by applying multiple formatting options 
at once, such as the font face, size, and color. 




Create Page Layouts 

You can use styles for more than just formatting text. 
You can create styles to align and position elements 
on a Web page. Using styles in this way, you can 
create complex page designs that display well on 
small and large computer screens. You can find more 
instructions for creating page layouts in Chapter 13. 
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Cascading Style Sheet Selectors 

Dreamweaver includes four different style selector 
types: the tag selector to redefine existing HTML tags, 
the class selector to create new styles that can be 
applied to any element on a Web page, the ID 
selector to create styles that can be used only once 
per page, and the compound selector, which can be 
used to combine style definitions. 




External Style Sheets 

When you want your styles to apply to multiple pages 
on your Web site, you must save them in a separate 
file called an external style sheet. You can attach the 
same external style sheet to any or all of the pages in 
a Web site. 




Internal Style Sheets 

A style sheet saved within the HTML code of a Web 
page is called an internal style sheet. Internal style 
sheet rules apply only to the page in which they are 
included. 




Style Sheets and Web Browsers 

Some older Web browsers do not support style sheet 
standards, and different Web browsers display style 
sheets differently. Always test pages that use style 
sheets on different browsers to ensure that the 
content is displayed as you intend it to for all your 
visitors. 




Edit Styles with the 
Property Inspector 



Dreamweaver CS4 added a CSS 
mode to the Property inspector. 
You can use the HTML settings 
to format and style tags and use 
the CSS settings to create and 
edit CSS styles. 



Edit Styles with the Property Inspector 



O Click an element on the page that 
you want to format. 

In this example, a headline 
formatted with the h3 tag is 
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| Unedited Style | 


Edited Style | 







0 Click CSS. 




The CSS options appear in the 
Property inspector. 

O Click Edit Rule. 

The New CSS Rule dialog box 
appears. 

Changing the name or selector 
type is optional. 

© Click OK. 
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The CSS Rule Definition dialog 
box appears. 

0 Click a style category. 

0 Select the style settings that you 
want. 

O Click OK. 



0 Click CSS Styles. 

• You can also click 
then click CSS Styles. 

• The CSS Styles panel opens, 
displaying the new class style. 

• Any content that is formatted 
with the style is automatically 
updated. 

In this example, the font face is 
changed for the text formatted 
with Heading 3. 




Why does Dreamweaver create compound styles in 
the Property inspector? 

When you edit an element such as a selection of text using the 
Property inspector, Dreamweaver automatically creates 
compound styles if the selected element is contained within 
an existing style. Thus, when you select some text formatted 
with an h3 tag, Dreamweaver includes any related styles and 
creates a compound style, such as #container 
#mainContent h3. Think of compound styles as 
very specific styles, meaning that the style for an 
h3 tag created as a compound style like this will 
only apply to text formatted with the h3 tag if it 
is contained within elements styled with 
#container and #mainContent on the page. 




Can the same styles be edited in the 
Property inspector and the CSS Styles 
panel? 

Yes. You can create and edit styles using 
both the CSS Styles panel and the Property 
inspector, and styles created or edited in 
one place will automatically be updated in 
the other. The main difference is 
that the CSS Styles panel 
includes more features for 
editing and reviewing styles, 
and the Property inspector, 
in HTML mode, can also be 
used to apply class and ID styles. 
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The CSS Rule Definition dialog 
box appears. 

© Click a style category. 

Q Select the style settings that you 
want. 

In this example, text style options 
are used to change the font face, 
color, and size. 

fli) Click OK. 

© Click CSS Styles. 

You can also click Window and 
then click CSS Styles. 

• The CSS Styles panel opens, 
displaying the new class style. 

You can apply the class style to 
new or existing content using the 
Property inspector. 

Note: To apply a new class style, see the following 
section, "Apply a Class Style." 




What are the best uses of class styles? 

The class selector is great for creating styles 
that you may want to use multiple 
times on the same page - for 
example, a text style for 
captions or a formatting 
style that you can use to 
align elements on a page. 
Class styles can also be 
used in combination with 
other styles. 




Is it better to customize an HTML tag or create my 
own class styles? 

One of the benefits of redefining existing HTML tags is 
that you can take advantage of recognized styles 
and hierarchies. This is especially true with 
heading tags. For example, if you 
change the way HI, H2, and H3 tags 
appear, it is best to maintain their 
relative size difference, keeping HI as the V 
largest and using it to format the most 
important heading on the page. 





You can apply a class style to any 
element on your Web page. Class 
styles enable you to change 
color, font, size, alignment, and 
other characteristics. You can use 
the same class style multiple 
times on the same page. 



Apply a Class Style 



APPLY A CLASS STYLE TO TEXT 

Note: To create a new custom style, see the 
previous section, "Create a Class Style." 

O Click and drag to select the text to 
which you want to apply a style. 

Q In the Property inspector, click 
the Class Q. 

O Click the name of the style. 



I Dreamweaver applies the style. 

In this example, a font style is 
applied. 
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APPLY A CLASS STYLE TO AN 
IMAGE 

Note: To create a new custom style, see the 
previous section, "Create a Class Style." 

O Click the image to select it. 

Q In the Property inspector, click 
the Class Q 

© Click the name of the style. 



• Dreamweaver applies the new 
style sheet to the image in the 
Document window. 

In this example, the image is 
aligned to the right, and 8 pixels 
of margin space are added to the 
left side of the image. 




What are some other options that I can use to 
define the formatting for text with a style sheet? 

With style sheets, you can specify a numeric 
value for font weight. This enables you to 
apply varying degrees of boldness, 
instead of just a single boldness setting 
as with HTML. You can also define type 
size in absolute units, such as pixels, 
points, picas, inches, centimeters, or 
millimeters, or in relative units, 
such as ems, exes, or percentage. 




Can I create as many styles as I want? 

Yes. However, one of the goals 
of style sheets is to help you 
work more efficiently, so 
you should try to create 
styles that are as efficient I 
as possible in the way 
they contain formatting 
options. 




You can edit style sheet 
definitions. You can then 
automatically apply the changes 
across all the text or other 
elements to which you have 
applied the style on your Web 
page or Web site. 




O Click Window. 

0 Click CSS Styles. 

The CSS Styles panel opens. 

O Click All to display all the 
available styles. 



© Double-click the name of a style 
that you want to edit. 
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The CSS Rule Definition dialog 
box opens. 

0 Click a style category. 

0 Select the style settings that you 
want. 

In this example, the font color is 
changed. 

O Click OK. 

Dreamweaver saves the style 
sheet changes and automatically 
applies them anywhere that you 
have used the style. 

# In this example, the font color 
changes automatically in the text 
where the style has already been 
applied. 
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How many different kinds of styles are there? 

You can create multiple kinds of style rules, but the main options are 
tag styles, class styles, ID styles, and compound styles. Tag styles are 
used to redefine HTML tags. Class styles are used to create new styles 
that can be applied to any element on a page and used multiple times. 
ID styles are commonly used with <DIV> tags to control the 
placement of elements on a page and create page layouts. 
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You can customize the style that an 
existing HTML tag applies. This enables 
you to apply special formatting whenever 
you use that tag to format text. This is a 
quick, easy way to apply multiple style 
options with one HTML tag. 




O Click Format. 

0 Click CSS Styles. 

0 Click New. 

The New CSS Rule dialog box 
appears. 



O Click [▼] and select Tag. 

0 Click 0 and select the HTML tag. 

You can also type a tag name into 
the field. 

0 Click [▼] and select this document 
only or choose an external style 
sheet. 

Note: To create style sheets for more than one 
document, see the section "Create an External 
StyleSheet." 




Q Click OK. 

m 



The CSS Rule Definition dialog 
box appears. 

© Click a style category. 

Q Select the style settings that you 
want. 

© Click OK. 



Dreamweaver adds the new style 
to the CSS Styles panel. 

• Any content that is formatted 
with the redefined tag is updated. 

In this example, the hi tag is 
redefined to use a different font 
face and size. 

• In this example, you can also 
apply the style by selecting 
content on the page and selecting 
Heading 1 from the Format 
drop-down list. 
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Why should I redefine an HTML tag? 

When you redefine an HTML tag, you can apply 
more than one style to the tag. As a result, you 
have to use only one HTML tag instead of several 
to apply multiple formatting options. For example, 
you can add center alignment to all 
your HI tags to control the >^ 
alignment of heading styles in C ^^^PWW 
one step. A special advantage of \S^^ > 
redefining HTML tags is that if a fmgg f*fr™) 
user's Web browser does not wWKm^^^ 
support style sheets, the HTML tag 
still provides its basic formatting. 



Does redefining an HTML tag change the 
format of any content that uses that tag? 

Yes. When you redefine an HTML tag, you change 
the tag's formatting effect anywhere that you use 
the tag. You can limit the change to the page that 
you are working on, or you can include it in an 

external style sheet and apply it to an N 

entire site. If you do not want to 
alter the style of an existing 
HTML tag, you should create 
class style sheets instead of 
redefining HTML tags. For more 
information on class style sheets, see 
the section "Create a Class Style." 



Create Styles with the 
Page Properties Dialog Box 




You can use Dreamweaver's Page 
Properties dialog box to define 
pagewide styles, such as 
background colors, link styles, 
and text options. 

When you define these options in the Page 
Properties dialog box, Dreamweaver 
automatically creates the corresponding 
styles and adds them to the Styles panel. 



Create Styles with the Page Properties Dialog Box 



O Click Page Properties in the 

Property inspector. 



The Page Properties dialog box 
appears. 

© Click Appearance (CSS). 

© Select the font, size, color, and 
spacing you want. 

Q Set page margins to 0 to remove 
the default indent in the left and 
top margins of the display area. 

0 Click Apply. 
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colors. 

© Click Q and select an underline 
style, such as Never underline 

to remove the underline style 
from all links on the page. 

0 Click OK. 

Dreamweaver saves the 
corresponding styles in the Styles 
panel. 

• Dreamweaver automatically 
applies the new style information 
to the page. 

In this example, the background 
color for the entire page is 
changed. 




What are some nontext-based features that I can 
implement with style sheets? 

Probably the most exciting thing that you can do with 
style sheets is to position elements precisely on the 
page. Style sheets allow you freedom from 
traditional, and imprecise, layout methods, 
such as HTML tables. Style sheets often 
use the <DIV> tag, which defines an 
area on the page where you can 
position an element with alignment 
attributes. You can also position 
elements more precisely by specifying 
margin and padding settings. 




Do all Web browsers support CSS in the 
same way? 

No, unfortunately not all Web browsers 
support CSS in the same way, and some do 

not support styles at all. „ 

However, styles have come 
a long way in the last few 
years, and so have 
browsers. Although some 
visitors may not be able to 
see your designs as you 
intend if you use CSS, the vast 
majority of people surfing the Web these 
days have browsers that support CSS. 




Create an External 
Style Sheet 



External style sheets enable you to 
define a set of style sheet rules and 
then apply them to many different 
pages — even pages on different 
Web sites. This enables you to keep 
a consistent appearance across many 
pages and to streamline formatting 
and style updates. 




Create an External Style Sheet 



Note: Make sure that the CSS Styles panel is 
open. Click Window then click CSS Styles. 

O Press (0) + G). 

The New Document dialog box 
appears. 

0 Click Blank Page. 

0 Click CSS. 

O Click Create. 



A new blank CSS file appears. 
© Press EDO + 0- 

The Save dialog box appears. 
0 Type a name. 
Q Click Save. 
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; The style sheet is displayed in the 
CSS Styles panel. 

• The name of the style sheet 
appears in the Files panel. 

© Click [x] to close the external 
style sheet. 



The style sheet closes. 

If you have another document 
open in the background, it 
becomes visible in the workspace. 

Note: The external style sheet is created inside 
your local site folder. For this to work, you must 
have defined your site in Dreamweaver. To define 
a site and identify the local site folder, see 
Chapter 2. 
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How can I add more styles to an external style 
sheet? 

When you create any new style, you have the option 
of selecting an existing style sheet from the 
Rule Definition field in the New CSS 
Rule dialog box. To create a class 
style, see the section "Create a Class 
Style." To customize an HTML tag, 
see the section "Customize an HTML 
Tag." When you define a new style it 
an external style, it is automatically 
added to the selected CSS file. 




Is it possible to add new styles later? 

Yes. You can add styles to an external style sheet 
at any point during production, even months after 
the site was first published. In addition, 
you can make changes or additions 
while you work on any page that 
is currently attached to an 
external style sheet, and those 
styles will become available on 
any page where the style sheet is 
attached. 




Attach an External 
Style Sheet 



After you have created a style sheet, you can 
attach it to any or all of the Web pages in 
your site. You can even attach multiple style 
sheets to the same page. After you attach an 
external style sheet to a page, all the style 
rules in the style sheet become available, and 
you can apply them to elements on the page 
just as you would apply styles from an 
internal style sheet. 
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O The external style sheet is linked 
to the page, and the style sheet is 
displayed in the CSS Styles panel. 

Any styles in the external style 
sheet are automatically applied to 
the page. 

Note: To apply styles to content in a document, 
see the section "Apply a Class Style." 

© Click and drag to move a style 
from the page's internal style 
sheet to the external style sheet. 

• You can move any or all of the 
styles from an internal style sheet 
to an external one. 

# To delete a style or to remove a 
style sheet from a file, click to 
select it and press ( ). 
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How can I move multiple styles to an external style sheet 
simultaneously? 

O Click here and attach an external style sheet. 
© Click + to open the internal <style> list. 

© Click to select one or more internal styles and drag the cursor over the 
name of the external style sheet. 

Dreamweaver moves the internal styles to the external style sheet. 
Note: You must save the CSS file to save the newly moved styles. 




Edit an External 
Style Sheet 



You can include hundreds of 
styles in a single external sheet. 
This enables you to continue to 
add to the style sheet as your 
site grows and to change or add 
sections. 
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The CSS Rule Definition dialog 
box appears. 

© Click a style category. 

© Select the style settings that you 
want. 

• In this example, the font color is 
changed. 

O Click OK. 

C Dreamweaver saves the new style 
definition in the external style 
sheet. 

# The new style is automatically 
applied to any content formatted 
with that style on all pages to 
which the external style sheet is 
attached. 




What problems can arise when I use CSS? 

The benefits to using cascading style sheets are enormous, and they 
mostly outweigh the challenges that come with their implementation. 
However, because CSS does not display the same in all Web browsers, 
pages designed with CSS may not be displayed the same on all 
computers. You should always test your pages to make sure that you like 
the results in all the browsers that you expect your visitors to use. For the 
best results, redefine existing HTML tags when possible and create your 
page designs so that they will be readable and display well even if the 
styles are not supported. 
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The CSS Box Model 

One of the most popular and recommended 
approaches to Web design today is the CSS Box 
model. By combining a series of HTML div tags 
with CSS styles, it is possible to create designs that 
are complex in their appearance but simple in their 
construction. One of the advantages of this model is 
that Web pages with CSS layouts display well on a 
variety of devices. 




Alignment with Floats 

Instead of using the familiar left and right alignment 
icons, the best approach to aligning images and other 
elements with CSS is to create styles that use floats. 
By floating elements to the right or left of a page, you 
can align them and cause any adjacent elements, 
such as text, to wrap around them. 
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Centering CSS Layouts 

The Center attribute is no longer recommended in 
CSS, so how do you center a design? The trick is to 
set the margins on both the left and right of a div to 
"auto," or automatic. This causes a browser to 
automatically add the same amount of margin space 
to both sides of the element, effectively centering it 
on the page. 




Dreamweaver's CSS Layouts 

Dreamweaver includes a large collection of CSS 
layouts that are carefully designed and ready for you 
to use to create your own Web pages. Although you 
will need to edit the CSS styles to customize these 
layouts, they can give you a great head start and 
help you avoid some of the common layout 
challenges of CSS. 




AP Div Basics 

AP Divs are discrete blocks of content that you can 
precisely position on the page, make moveable by the 
user, and even make invisible. Most significantly, you 
can stack AP Divs on top of each other. AP Divs can 
contain any kind of content, including text, graphics, 
tables, and even other AP Divs. Unfortunately, layouts 
created completely with AP Divs are not very flexible 
and thus not well-suited to the many different displays 

in use on the 

Web. Use AP 



Nested AP Divs 

AP Divs can contain nested AP Divs, which create 
areas of content that stay linked together on a page 
for better control during production of Web pages. 
Nested, or child, AP Divs can inherit the properties of 
their parent divs, including visibility or invisibility. You 
can also nest AP Divs within divs that do not use 
absolute positioning. 





Create a Web Page 
with a CSS Layout 



Dreamweaver includes a collection of 
CSS layouts to make it easy to 
design pages using HTML div tags 
and styles. Creating a new page with 
a CSS layout is as easy as creating a 
new blank page, but with the 
advantage of already having many 
design elements in place. 



Create a Web Page with a CSS Layout 



O Click File. 
Q Click New. 




The New Document dialog box 
opens. 

© Click Blank Page. 

O Click HTML. 

0 Click a layout option. 

O Click Create. 
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Dreamweaver creates a page with 
the selected layout. 

Q Add a page title by changing the 
text here. 

© Press ( ] (Q) + Q to save the 
page. 

Note: Never use spaces or special characters in 
the name of a Web page. Hyphens (-) and 
underscores (_} are okay. 



Q Replace the placeholder text in 
the layout with your own text. 

You can also add images and 
other elements. 
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Can I create new styles for a CSS layout? 

Yes. You can create and apply 
new styles in a CSS layout just 
as you would any other 
page in Dreamweaver. 
Dreamweaver's CSS 
layouts include a collection 
of styles needed to create the 
original design, but you can 
add as many styles as needed for 
formatting and layout. 




Can I save CSS layout styles to an external 
style sheet? 

Yes. You can always move styles 
to an external style sheet. First, 
create a new CSS file, then 
attach it to the page, and 
finally click and drag the styles 
into the external style sheet in 
the CSS Styles panel. You can 
find more detailed instructions in 
the previous chapter. 
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You can edit the CSS layouts that 
are included in Dreamweaver. 
However, if you are not familiar 
with CSS, editing one of these page 
layouts can be confusing. 

CSS layouts cannot be edited in the design area of 
Dreamweaver. You must change the styles in the 
CSS Styles panel to edit the layout. 



Edit a CSS Layout 



CSS Styles Panel 

1. <style> 
body 

.oneColFixC*rl-dr#confainer 
. one ColFt«Ctfl-<lr#h««l» 



Note: If the CSS Styles panel is not open, click 
Window and then click CSS Styles to open it. 

O Double-click the name of the style 
that you want to change. 



The CSS Rule Definition dialog 
box appears. 

Q Click a category. 

In this example, the background 
color for the header style is 
changed. 
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O Edit the style. 
O Click OK. 
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The changes to the style are 
automatically applied in the 
workspace. 

In this example, the background 
color in the header area changes. 

• The style is updated in the CSS 
Styles panel, and the new style 
option is displayed in the 
Properties pane. 



• You can also edit CSS styles in 
the CSS Properties pane. 

In this example, the background 
color is selected, displaying the 
color swatches. 
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How do I know which style corresponds to each part of the 
layout? 

To identify what style is controlling the design of any part of the page, 
place your cursor in the page where you want to change the style 
and look at the tag selector at the bottom of the design area (just 
above the Property inspector). In the tag selector, you see all the tags 
that surround whatever you have selected in the design area. Another 
way to identify styles is to view the HTML source code. Choose the 
Split view and select some text or an image that is in an area of the 
page that you want to edit. Then look in the code to see what style is 
applied to your selection. 





You can insert images into a CSS 
layout just as you would insert 
them into any other page in 
Dreamweaver. After you have 
inserted an image, you can 
format and align it using CSS. 



Add Images to a CSS Layout 



Note: If the CSS Styles panel is not open, click 
Window and then click CSS Styles to open it. 

O Click to place where you want 
to add an image. 



© Click V 
0 Click Insert. 



O Click the Images Q} 

0 Click 0 and select the folder that 
contains the image. 

0 Click the name of the image. 

O Click OK. 
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The Image Tag Accessibility 
Attributes dialog box appears. 

© Type a description of the image. 

r A long description URL is 
optional. 

0 Click OK. 

• The image appears in the layout. 

To remove or replace the Latin 
text included in CSS layouts, 
select the text and press ( ] . 
Then type to enter the new text 
or use copy and paste. 
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Why can I not drag the edge of a 
change the size? 

You cannot change a CSS layout 
by simply clicking and dragging 
the border of a div tag. To 
edit the width or height of 
any of the divs in a 
Dreamweaver CSS layout, 
you have to edit the CSS style. 
To learn more, see the section 
"Edit a CSS Layout." 




Can I change the background color? 

Yes, you can change the background 
color of a CSS layout much like 
you would change the 
background color on any 
other page - by using the 
Page Properties dialog box. 
Click Window and then click 
Page Properties to open the 
dialog box. Choose the 
Background category and use the Background 
Color field to select a color. To change the 
background color of an individual div tag in the 
design, you have to edit the CSS style. To learn 
more, see the section "Edit a CSS Layout." 




You can use CSS styles to align images 
and other elements on a Web page. Many 
designers create class styles that float 
elements to the right and left, an ideal 
way to wrap text around an image. 

Many of Dreamweaver's CSS layouts include 
class styles for floats with the names f ltrt 
(to float elements to the right) and fltlf t 
(to float elements to the left). 



Using Floats to Align Elements 



Note: If the CSS Styles panel is not open, click 
Window and then click CSS Styles to open it. 

O Click Format. 

Q Click CSS Styles. 

0 Click New. 

The New CSS Rule dialog box 
appears. 
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© Click [V] and select CI 
apply to any HTML 

0 Type a name for the class style. 

In this example, a style is created 
called ".float-right," which will be 
used to align images to the right 
side of a page. 

Note: Class styles must begin with a dot (.). 

0 Click OK. 

The CSS Rule Definition dialog 
box appears. 
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Q Click Box. 

0 Click 0 and select right. 

Q Click the Margin check box to 
deselect it (@ changes to Q)- 
© Enter the margin space. 

This example uses 8 pixels for the 
bottom and left side to create a 
margin between the image and 
the text. 

© Click OK. 



; The new style appears in the CSS 
Styles panel and the Property 
inspector. 

© Click to select the element that 
you want to float. 

© Click □ and select the style to 
apply it to the element. 

In this example, the element 
aligns to the right, and the text 
wraps around it on the left. 
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How do I create a style to float elements to the left? 

To create a style to float elements to the left, repeat the steps in this 
exercise with these changes: In step 8, choose left from the Float drop- 
down list, and in step 10, add margin space to the bottom and right. 




All of Dreamweaver's CSS layouts 
include text formatted with a 
Heading 1 tag in the header area 
at the top of the page. 

Replacing the text with an image is 
similar to inserting an image anywhere 
else on the page, with a few 



Add an Image to the Header 




Note: If the CSS Styles panel is not open, click 
Window and then click CSS Styles to open it. 

O Click to place in the banner 
area. 

0 Click the Image Q 

0 Click Q and select the folder that 
contains the image. 

0 Click to select the name of the 
image. 

0 Click OK. 



If the Image Tag Accessibility 
Attributes dialog box appears, 
enter a description and click OK. 

The image appears in the header 
area of the layout. 

To delete any text, click and drag 
to select it and press Pfll . 

0 Click to select the image. 

0 Right-click the hi tag. 

0 Click Remove Tag. 




The extra space above and below 
the banner image is removed. 

Q Click the name of the header ID 
style. 

flj) Click to select the contents of the 
padding field. 

O Press QSJ. 

• To remove the background 
color, select the contents of 
the background color field and 
press G2J. 



The extra space to the left and 
right of the banner image is 
removed. 




Can I change the width of a CSS layout? 

Yes. The width setting for the CSS layouts in Dreamweaver is 
controlled by the style that includes the ID tcontainer. Select the 
#container style name in the CSS Styles panel and then change 
the width setting to alter the width of the entire CSS layout. 





AP Divs are scalable rectangles, inside of 
which you can place text, images, and just 
about anything else that you can include 
on a Web page. Although they work 
similarly to the divs used in Dreamweaver's 
CSS layouts, AP Divs include an Absolute 
Positioning setting, which means that they 
maintain their position on a page 
irrespective of the browser size. 




CREATE AN AP DIV 

O Click [▼] and select Layout in the 

Insert panel. 

O Click the Draw AP Div button 



) Click and drag to create an AP Div 
on the page. 

You can resize and reposition an 
AP Div after you create it. 

> The outline of the AP Div 
appears. 

> You can click the tab in the 
upper-left corner of the AP Div to 
select it. 

> When you select the AP Div, the 
Property inspector displays the 
AP Div's properties. 
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ADD CONTENT TO AN AP DIV 

O Click inside the AP Div. 

© Click to select an element in the 
Files panel and drag it into the 
AP Div. 

You can add text by typing inside 
the AP Div. You can format text 
and images within an AP Div 
using the Property inspector, just 
as you would format text or 
images anywhere else on a page. 



The element is displayed inside 
the AP Div. 

You can specify image properties, 
such as alignment, within an AP 
Div by clicking to select the image 
and changing the image 
properties in the Property 
inspector. 

Note: To format text, see Chapter 5. For image 
options, see Chapter 6. 
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Should I use AP Divs to create a page 
layout? 

Although AP Divs are very powerful 
layout tools, they are not the best 
option for creating an entire 
page layout. AP Divs serve as a 
nice complement to other page 
layout options, but when used 
exclusively, they create very 
inflexible designs that can look 
very different in different browsers. 




What happens if a browser does not display 
AP Divs properly? 

Although the latest versions of 
Internet Explorer and Firefox 
support AP Divs consistently, older 
browsers that do not support AP 
Divs may not display them as you 
intended. Similarly, text can get cut 
off if the font size is displayed larger 
than you intended in a browser and the 
text exceeds the size of the AP Div. 




Resize and 
Reposition AP Divs 



When you create a new AP Div, 
you can adjust its position and 
dimensions to make it fit 
attractively within the rest of the 
content on your page. One of 
the advantages of AP Divs is 
that you can move them easily 
by clicking and dragging them. 



Resize and Reposition AP Divs 



CLICK AND DRAG TO RESIZE AN 
AP DIV 

O Click the tab in the upper-left 
corner of the AP Div to select it. 

O Square, blue handles appear 
around the edges of the AP Div. 

0 Click and drag one of the handles 
changes to \). 

Dreamweaver resizes the AP Div 
to the new size. 



RESIZE WITH WIDTH AND 
HEIGHT ATTRIBUTES 

O Click this tab. 

0 Type a new width in the W field. 

0 Press [ (l-BTfUl) . 

Dreamweaver changes the AP 
Div's width. 

0 Type a new height in the H field. 

0 Press l^flHl (l:MiHJ.I) . 

Dreamweaver changes the AP 
Div's height. 
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REPOSITION WITH THE CURSOR 

O Click and drag the tab in the 
upper-left corner of the AP Div to 
move it to a new position (t^ 
changes to ty. 

Dreamweaver moves the AP Div 
to the new location. 



REPOSITION WITH LEFT AND 
TOP ATTRIBUTES 

O Click the AP Div's tab to select it. 

© Type the new distance from the 
left side of the window. 

e press (mmmsss)- 

© Type the new distance from the 
top of the window. 

0 Press BffBl (GHEED- 
Dreamweaver applies the new 
positioning to the AP Div. 
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How can I change the visibility of an 
AP Div? 

To change an AP Div's visibility, select an AP 
Div and then click the Vis \*\ 
in the Property inspector. 
You can make an AP Div 
visible or invisible. If it is a 
nested AP Div, it can 
inherit its characteristics 
from its parent, which is the 
enclosing AP Div. 




Is there any other way to tell whether an AP Div 
is visible or invisible? 

Yes. There is a visibility column available in the AP 
Elements tab in the CSS Styles panel. Click 
next to the AP Div name in the visibility 
column to adjust it. The open eye icon 
( |at| ) means that the AP Div is visible; the 
closed eye icon ( | means that the AP 
Div is invisible. If no icon is showing, 
visibility is set to the default setting, and the 
AP Div appears visible or inherits its visibility. 



Change the Stacking 
Order of AP Divs 



You can change the stacking 
order of AP Divs on a page, 
thus affecting how they overlap 
one another. You can then hide 
parts of some AP Divs under 
other AP Divs. 



Change the Stacking Order of AP Divs 



USING THE Z INDEX ATTRIBUTE 

O Click the AP Elements tab in the 

CSS Styles panel. 

© Click the name of the AP Div 
whose order you want to change 
to select it. 

When an AP Div is selected, it 
becomes visible in Dreamweaver's 
design area, even if it is covered 
by another AP Div. 
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) Type a new number in the Z 
index field. 

The higher the Z index of an AP 
Div, the higher it is placed in the 
stack. 

: Dreamweaver changes the 
stacking order of the AP Divs. 
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BY CLICKING AND DRAGGING 

Note: If the CSS Styles panel is not open, dick 
Window and then dick CSS Style to open it. 

O Click the AP Elements tab. 

© Click and drag the AP Div name 
above or below another AP Div 
changes to q). 




[Hr- 



Dreamweaver changes the 
stacking order of the AP Divs. 

• If all or part of an AP Div is 

covered by another AP Div, it will 
not be visible on the page. 
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Can I use any number for the Z index? 

Yes. You can use any number for your Z index. If 
you are working with many AP Divs on a page, a 
good technique is to number them as 10, 20, 30, 
and so on, instead of 1, 2, and 3. 
That way, if you want to position an . 
AP Div between existing AP Divs, , 
you can number it something like \ "* G 
1 5 or 25, and you do not have to \ 1 
renumber all the other AP Divs to 
accommodate its new position. 



How do I change the name of an AP Div? 

You can change the name of an AP Div in the 
Property inspector. First, select the AP Div by 
clicking its name in the AP Elements panel or by 
clicking to select the AP Div in the 
design area of the page. In the 
Name field, in the top-left corner 
of the Property inspector, you see j 
the current name displayed as 
text. Simply select the text and 
type the new name. 




Create a Nested 
AP Div 



A nested AP Div is often called a child AP 
Div, and the AP Div that contains the 
nested AP Div is called the parent. They act 
as a unit on the page; if the parent AP Div 
moves, the child goes with it. Similarly, the 
positioning of the child is based on the 
position of the parent. 

You can move the child AP Div independently of the 
parent, but the AP Divs always stay linked unless you 
drag the nested AP Div out from under the parent. 



Create a Nested AP Div 




Note: If the AP Elements panel is not open, click 
Window and then click CSS Styles. Then click 
the AP Elements tab. 

O Click ijj. 

Q Click and drag to create an 
AP Div. 

Dreamweaver inserts an AP Div 
into the page. 

You can insert text, images, or 
tables into the AP Div. 



In this example, text is placed in 
the first AP Div. 



© Click and drag to create a nested 
AP Div inside the first AP Div. 

# The name of the nested AP Div 
appears indented below the first 
AP Div. In this example, the AP 
Div labeled apDiv2 is nested 
inside an AP Div with the name 
apDivl. 
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• You can insert text, images, or 
tables into the nested AP Div. In 
this example, an image is placed 
in the nested AP Div. 

@ Click and drag to move the first 
AP Div on the page. 




The nested, or child, AP Div 
moves with the parent AP Div. 





Can I free a nested AP Div? 

Yes, you can take a nested AP Div out of its parent AP Div. To do so, 
click Window, then click CSS Styles, and then click the AP 
Elements tab to open the AP Divs panel. Click the nested AP Div 
and drag it above the parent AP Div. The AP Div appears on its own 
line in the AP Elements panel, the L is removed, and the layer is no 
longer nested. This does not change the location of the AP Div on 
the page, but it allows you to move the AP Div independently of its 
parent. 





Publishing a 
Web Site 




After you are done 
building your Web 
pages, you can publish 
your site on a server 
where anyone with an 
Internet connection can 
view them. This chapter 
shows you how to 
publish your Web site 
and keep it up-to-date 
with Dreamweaver. 
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Most designers build and test their Web sites 
on their local computers and then transfer 
them to a Web server when they are ready to 
publish them on the Internet. A Web server is 
an Internet- connected computer running 
special software that enables the computer to 
serve files to Web browsers. Dreamweaver 
includes tools that enable you to connect and 
transfer pages to a Web server. 




Publish Your Web Site 

To publish your site files using Dreamweaver, follow these 
steps: 

O Identify the main folder on your computer where all your 

Web site files are kept. 
Note: To define a local site, see Chapter 2. 
Q Enter the Web server information to publish your files. 
Note: To define a remote site, see the section "Set Up a Remote Site." 

Most people publish their Web pages on servers 
maintained by their Internet service provider (ISP), 
a Web-hosting company, or their company or school. 

© Connect to the Web server and transfer the files. 

The Site window displays a user-friendly interface for 
organizing your files and transferring them to the remote 
site. 

After uploading your site, you can update it by editing the 
copies of the site files on your computer (the local site) 
and then transferring those copies to the Web server (the 
remote site). 
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With the Site window, you can view the organization of all the files in your 
site. You can also upload local files to the remote site and download remote 
files to the local site through the Files panel. You can access the Site 
window by clicking the Expand/Collapse button in the Files panel. For 
more information about the Files panel, see Chapter 3. 



The right pane displays all the files in the root folder 
of your local computer. 



Remote site 

The left pane displays all the files in your site that 
have been published to the remote Web server. 



[■ "* - - - - *' X J 




Expand/Collapse Files panel 

You can click the Expand/Collapse button ( ] ) to expand the Files panel to two 
panes. With the Files panel expanded, you can see the local and remote sites 
simultaneously, making it easier to upload and download files. To close the 
expanded view and return the Files panel to one column, click [jj again. 



File transfer 

The □ button 
connects to the 
remote site. The Put 
button ( f 77 ] ) enables 
you to upload files to 
the remote server, and 
the Get button ([*]) 
enables you to 
download files from 
the remote server. 



Site menu 

This menu lists all the 
Web sites that you 
have set up in 
Dreamweaver and 
makes it easy to 
switch from working 
on one site to working 
on another. For more 
information about 
setting up sites in 
Dreamweaver, see 
Chapter 2. 
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Test Your Pages in 
Different Browsers 



Before you publish your Web site, it is 
always a good practice to test your pages 
on your local computer first. You can 
preview an HTML page in any browser 
that is installed on your computer. 



Note: There are differences between how HTML 
pages are displayed in different browsers, and you 
may want to make some changes to your pages if you 
do not like the differences. 




SELECT BROWSERS 
O Click File. 

0 Click Preview in Browser. 
0 Click Edit Browser List. 




wS^m 



The Preferences dialog box 
appears. 

© Click [+] in the Preview in 
Browser area. 

The Add Browser dialog box 
appears. 

0 Click Browse. 
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The Select Browser dialog box 
appears. 

O Click 0 and select the folder that 
contains the browser application. 

Q Click the browser application that 
you want to add. 

O Click Open. 

The Select Browser dialog box 
closes. 



Q Click OK to add the browser and 
close the Add Browser dialog box. 

(E) Repeat steps 4 to 9 to add 
additional browsers. 

(j) Click OK close the Preferences 

dialog box. 
TEST YOUR PACE 
O Click Q 
Q Click a Web browser. 

© Repeat steps 1 and 2 for each 
browser. 




Why do Web pages not look the same in different 
browsers? 

Over the years, Web design has evolved. In the early days of 
the Web, you could create sites only with simple HTML and 
images. As the technologies evolved to include 
more advanced options, such as CSS and 
multimedia, Web browsers evolved as well. 
Unfortunately, many people still have older 
browsers that do not support all the latest 
design options in use on the Web, and not c 
all browser makers updated their 
programs in the same ways. 




What is the most popular browser? 

There are dozens of 
browsers in use on 
the Web, including 
Internet Explorer, 
Firefox, Opera, and 
even special 
browsers, called 
screen readers, that 
read Web pages to 
users. 




Organize Your 
Files and Folders 



You can use the Files panel to organize the files 
and folders that make up your Web site. With 
this panel, you can create and delete files and 
folders, as well as move files between folders; 
Dreamweaver automatically fixes any associated 
links and inserted images. 

Creating subfolders to organize files 
of a similar type can be useful if you 
have a large Web site. 




O Click Window. 

© Click Files. 

The Files panel is displayed. 

Q Click [▼] to display the contents of 
the site. 



) Click + to view the files in a 
subfolder (+ changes to -). 

The folder contents are displayed. 

You can click - to close the 
subfolder. 




) To move a file from the local site 
folder, click and drag it to the 
new subfolder changes to Q). 



Publishing a Web Site^^^ 


m 

\ 










1 


> 




Ospray j Tult Elk 


The Great Egret 















The Update Files dialog box 
appears, asking if you want to 
update your links. 

© Click Update to keep your local 
site links from breaking. 

Dreamweaver automatically 
makes any changes necessary to 
preserve the links. 




What happens to links when I move files? 

When you create a hyperlink from one page to another, 
Dreamweaver creates the necessary HTML code, which 
includes a reference to the name and location of the 
page to which you are linking. If you move or 
rename files after they are used in a link, the 
link code must be updated, or the link will be 
broken. When you use the Files panel to 
move or rename files or to move files into 
subfolders, Dreamweaver keeps track of any 
affected code and updates it automatically. 




Should I use subfolders? 

Organizing your text, image, and 
multimedia files in subfolders can help 
you keep track of the contents of your 
Web site. Although you can 
store all the files on 
your site in one main 
folder, most designers 
find it easier to find files \ 
when the files are 
organized in subfolders. 





Before you can publish your Web site in 
Dreamweaver, you need to set up the remote 
site to create a connection to your Web server. 
You set up a remote site by entering the FTP 
information, including your username and 
password, for your Web server. You can then 
use Dreamweaver to transfer your files from 
your computer to the remote server. 

Note: Before you can set up a remote site, you 
need to set up your local site and define it in 
Dreamweaver. To do so, see Chapter 2. 




O Click Site. 

© Click Manage Sites. 



The Manage Sites dialog box 
appears. 

O Click a site name from the list. 
0 Click Edit. 




The Site Definition dialog box 
appears. 

0 Click the Advanced tab. 

0 Click Remote Info. 

0 Click the Access Q 
0 Click FTP. 

Note: FTP is the most common way for Web 
designers to connect to their Web servers. The 
other options are only used in special situations. 



Q Type the name of the FTP host 
(Web server). 

0 Type the directory path of your 
site on the Web server. 

0 Type your login name and 
password. 

You can click Test to confirm the 
Web server information. 

0 Click OK. 

0 Click Done. 

The remote site is now set up. 





What happens if I change my Internet 
service provider (ISP) and I need to move 
my site to a different server? 

You need to change your remote 
site settings to enable 
Dreamweaver to connect to your 
new Web server. Your local site 
settings can stay the same. Make [ 
sure that you keep your local 
files current and backed up 
before you change servers. 




How do I register a domain name? 

You can register a domain name at a number of 
domain registration services on the Internet. 
Two of the most popular, and least expensive, 
are www.godaddy.com and 
www.land1.com. As long as you 
pay the annual fee, which is less 
than $10 a year at these sites, 
the domain is yours. To direct the 
domain to your Web site, you need 
to specify where your Web server is 
at the domain registration service. 




You can connect to the Web server that 
hosts your remote site and transfer files 
between it and Dreamweaver. 
Dreamweaver connects to the Web 
server by a process known as file 
transfer protocol, or FTP. 

Before you can connect to a remote server, you need to 
set up your remote site. For more information, see the 
preceding section, "Set Up a Remote Site." 



O In the Files panel, click the 
Expand Site Panel button flj} to 
expand the remote and local site 
panels. 




The Files panel expands to fill the 
screen. 

0 Click the Connect button Q to 
connect to the Web server. 

Note: Dreamweaver displays an alert dialog box 
if it cannot connect to the site. If you have trouble 
connecting, review the host information that you 
entered for the remote site. 



When you are connected to the 
Internet, □ changes to PH - 

Dreamweaver displays the 
contents of the remote site's host 
directory. 

© Click + to view the contents of a 
directory on the Web server 
(+ changes to -). 

Dreamweaver displays the 
contents of the directory. 



© Click □ to disconnect. 

Dreamweaver disconnects from 
the Web server. 

If you do not transfer any files for 
30 minutes, Dreamweaver 
automatically disconnects from 
the Web server. 




How do I keep Dreamweaver from prematurely 
disconnecting from the Web server? 

You can click Edit, then click Preferences, and then click 
Site. You can adjust the FTP transfer options to change 
the time that Dreamweaver allows to pass 
between commands before it logs you off 
the server - the default is 30 minutes. 
Note that Web servers also have a similar | 
setting on their end. Therefore, the 
server, not Dreamweaver, may sometimes ^ 
log you off if you are inactive for more 
than the server's allotted time. 




What if the connection does not work? 

If Dreamweaver fails to connect to your 
server, your Internet connection may be 
down. Make sure that your computer is 
connected to the Internet and 
try again. If you still cannot 
connect, you may have 
incorrectly entered the FTP 
settings. Check with your 
service provider or system 
administrator if you are not 
sure about your Web server settings. 




Upload Files to a 
Web Server 



You can use Dreamweaver's FTP 
features to upload files from 
your local site to your remote 
server to make your Web pages 
available to others on the 
Internet. 




PUBLISH FILES ONLINE 

O Click Q to connect to the Web 
server through the Site window 
(□changes to 

Q Click the file that you want to 
upload. 

O Click the Put button Q. 

C You can also right-click the file 
and select Put from the menu 
that appears. 



A dialog box appears, asking if 
you want to include dependent 
files. 

Note: Dependent files are images and other files 
associated with a particular page. 



# You can click here ( changes 
to ✓ ) to avoid seeing this dialog 
box again. 



• The file transfers from your 
computer to the Web, and the 
filename appears in the Remote 
files panel. 



UPLOAD A FOLDER 

O ' n the right pane, right-click the 
folder [o] that you want to 
upload. 

0 Click Put. 

O You can also click the folder Q 
and then click [^]. 

Dreamweaver transfers the folder 
and its contents from your 
computer to the Web server. 
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How do I stop a file 
transfer in progress? 

You can click Cancel in 
the Status dialog box 
that appears when a 
transfer is in progress. 
You can also press ( ) 
to cancel a file transfer. 




How can I delete a file from the Web server? 

With the Site window open, 
connect to the Web server. 
When the list of files appears 
in the left pane, click the file 
that you want to delete and 
then press ( ). A dialog box 
appears, asking if you really 
want to delete the selected file. 
Click OK. You can also delete 
multiple files and folders. 




Download Files from 
a Web Server i 



You can download files from your 
Web server in Dreamweaver if you 
need to retrieve them. After they 
are downloaded, you can make 
changes or updates to the pages in 
Dreamweaver and then put them 
back on the Web server. 




DOWNLOAD FILES 

O Click [TJ to connect to the Web 
server (LJ changes to [ ]). 

Q Click the file that you want to 
download. 

O Click the Get button Q. 

C You can also right-click the file on 
the remote site and select Get 
from the menu that appears. 



A dialog box appears, asking if 
you want to include dependent 
files. 

Note: Dependent files are images and other files 
associated with a particular page. 

O Click Yes or No. 

• You can click the check box 
(|0| changes to [7]) to avoid 
seeing this dialog box again. 




• The file transfers from the Web 
server to your computer. 

If the file already exists on your 
local computer, a dialog box 
appears, asking whether it is okay 
to overwrite it. 



DOWNLOAD MULTIPLE FILES 

O Press and hold fjjfl (Wfflffilft 
and click to select the files that 
you want to download. 

0 Click [S- 

The files transfer from your Web 
server to your computer. 

# The downloaded files appear in 
the Local Files panel. 
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Where does Dreamweaver log errors that 
occur during file transfer? 

Dreamweaver logs all transfer 
activity, including errors, in a 
file-transfer log. You can view 
it by clicking Window, then 
clicking Results, and then 
clicking FTP Log. The FTP Log 
panel appears at the bottom of 
the screen. 




Can I use my Web site to store files while I 
am still working on them? 

If a file is on your Web server, it can be viewed on 
the Internet. When pages are 
under construction and you do not 
want them to be seen, you should 
not put them up on your Web site, 
even temporarily. Even if the page 
is not linked to your site, someone 
may find it, or a search engine 
may even index and cache it. 




Synchronize Your Local 
and Remote Sites 



Dreamweaver can synchronize files between your local 
and remote sites so that both sites have an identical 
set of the most recent files. This can be useful if other 
people are editing the files on the remote site and you 
need to update your local copies of those files. It is 
also handy if you edit pages and you do not remember 
all the pages that you need to upload. 




The Synchronize Files dialog 
box appears. 

0 Click □ and select the files that 
you want to synchronize. 

Q Click [▼] and select the direction 
that you want to copy the files. 




You can place the newest copies 
on both the remote and local 
sites by selecting Get and Put 
newer files. 

0 Click Preview. 





Dreamweaver compares the sites 
and then lists the files for 
transfer, based on your selections 
in steps 3 and 4. 

0 Click to select the files that you 
do not want to transfer. 

O With the files selected, click the 
Trash button (_J) to remove 
them from the transfer list. 

0 Click OK. 



1 1 Dreamweaver transfers the files. 

The local and remote sites are 
now synchronized. 
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Are there other FTP tools besides those available from 
Dreamweaver? 

Dreamweaver offers the convenience of transferring files without 
having to open other programs. However, the application uses many 
system resources and can significantly slow down some computers. 
There are many good alternatives available. For example, in 
Windows, you can use WS_FTP. In Mac OS, you can use Transmit or 
Fetch. You can download evaluation copies of these programs from 
www.download.com. Other alternatives for transferring files through 
FTP include CuteFTP, LeechFTP, and CoffeeCup Direct FTP. 
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Maintaining a 
Web Site 




Maintaining a Web site and 
keeping its content fresh 
can be as much work as 
creating the site. 
Dreamweaver's site- 
maintenance tools make 
updating faster and easier. 
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Dreamweaver's visual aids make is 
possible to see things that are not there, 
such as the outline of a div tag or the 
border of a table. These visual aids make 
it easier to manage the features of your 
site and to edit your page designs. 



Although visual aids are helf 
prefer to turn them off so that you can see how your 
designs will look without all the borders and outlines. 



Sweet Things 

NEW! 




O Click the Visual Aids button 
© Click CSS Layout Outlines. 
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: A dotted line appears around any 
div tags or other CSS layout 
elements. 

) Click again. 

) Click CSS Layout Outlines to 

remove the g 
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The dotted lines around CSS 
layout elements disappear. 

0 Click p\\ again. 

O Click Hide All Visual Aids. 



All visual aids disappear. 




Are visual aids displayed in a 
Web browser? 

No. Visual aids are visible only in the 
Dreamweaver workspace. 
Visual aids are designed to 
provide additional information 
and guides as you work on a 
page layout, but they will not 
be visible when your visitors to 
your site view your page designs 
in a Web browser. 




Is there a shortcut to hide all visual aids? 

Yes. Like many features in Dreamweaver, you can use a 
keyboard shortcut instead of selecting an 
option from a menu or panel. To 
hide all vi sual a ids at once, press 
[ ) plus ( ) plus the letter / (on 1 
a Windows computer). If you are 
using a Mac, press Q plus [ ) plus 
the letter /. To turn visual aids back on, 
press the same keys in combination 
again. 






You can view and manage 
elements that appear in the 
pages of your site with the 
Assets panel. The Assets panel 
provides an easy way to insert 
elements that you want to use 
more than once in your site. 



O Click Window. 
Q Click Assets. 

c You can also click the Assets te 
in the Files panel to open the 
Assets panel. 



The Assets panel appears, 
displaying objects from the 
selected category. 

Q Click an icon to display a 
collection of assets. 

In this example, the image assets 
are shown. 

Q Click the name of any asset to 
preview it in the Assets panel. 

• You can click and drag the side of 
the Assets panel to expand it. 




The Assets panel displays in the 
new dimensions and previews 
your selected asset. 

0 Click a column heading. 

The assets are now sorted by the 
selected column heading in 
ascending order. 

If you click the name of the 
column that the assets are 
already sorted by, the asset order 
switches to descending order. 

# To view other assets, you can 
click a different category button. 




How are assets organized? 

Items in the Assets panel are organized 
into the following categories: 
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Images 


GIF,JPG,and PNG images 


m 


Color 


Text, background, link, and style-sheet colors 


m 


URLs 


Accessible external Web addresses 


m 


Flash 


Flash-based multimedia 




Shockwave 


Shockwave-based multimedia 




Movie 


QuickTime and MPEG movies 




Scripts 


External JavaScript or VBScript files 


m 


Templates 


Page-layout templates 


m 


Library 


Library of reusable page elements 





Add Content with 
the Assets Panel 




You can add frequently used 
content to your site directly 
from the Assets panel. This 
technique can be more efficient 
than using a menu command or 
the Insert panel. 



O Click inside the Document 

window where you want to insert 
the asset. 

0 Click the Assets tab to open the 
Assets panel. 

0 Click a category. 

© Click an asset. 

0 Drag the asset onto the page. 



If the asset is an image, the 
Image Tag Accessibility Attributes 
dialog box appears. 

0 Type a description of the image. 

Entering a long description URL is 
optional. 
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Dreamweaver inserts the asset 
into your Document window. 

In this example, an image is 
added to the page. 

© Click to select the image or other 
asset. 

Q Edit the asset as you would any 
other asset. 

In this example, an image 
alignment option is applied. 



Dreamweaver applies your 
changes to the asset in the 
Document window. 

• In this example, the image is 
aligned to the right. 
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How do I copy assets from one site to 
another? 

Click one or more items in the 
Assets panel and then right- 
click ([ ) + click) the 
selected assets. From the 
menu that appears, click Copy 
to Site and then click a site 
to which you want to copy 
the assets. The assets appear in 
the Favorites list under the same 
category in the other site. 




Are all my links saved in the Assets panel? 

Only links to external Web 
sites and email addresses are ZJ>fa 
saved in the Assets panel. 
Links to internal pages in 
your site are not saved in 
the Assets panel. You can 
use the saved links in the 
Assets panel to quickly create 
new links to Web sites and email 
addresses to which you have 
already linked in your site. 




Specify Favorite 
Assets 



To make your asset lists more 
manageable, you can organize 
assets that you use often into a 
Favorites list inside each asset 
category. 




ADD AN ASSET TO THE 
FAVORITES LIST 

O Click the Assets tab to open the 
Assets panel. 

Q Click a category. 

© Click an asset. 

O Right-click (QB + click) the 
selected asset and click Add to 
Favorites on the menu that 
appears. 

Dreamweaver adds the asset to 
the category's Favorites list. 



0 Click Favorites ( 
to®). 

© The selected asset appears in the 
Favorites category. 





Maintaining a Web Site 




How do I remove an item entirely from the 
Assets panel? 

To delete an asset, you need 
to delete the corresponding 
file from the Files panel. 
Click Window and then 
click Files or click the File 
tab to open the Files panel. 
Click the name of the file . 1 
and then press ( ) or 'HI'' 




How do I add items to the Assets panel? 

You do not need to add items. 
One of the handiest things 
about the Assets panel is 
that every time you add an 
image, external link, email 
link, color, or multimedia 
asset to your Web site, 
Dreamweaver 
automatically stores it in 
the Assets panel. 




Dreamweaver provides a Check 
In/Check Out system that keeps track 
of files when a team is working on a 
Web site. For example, when one person 
checks out a page from the Web server, 
others cannot access the same file. 

When the Check In/Check Out 
system is off, multiple people can 
edit the same file at once. 



ENABLE CHECK IN/CHECK OUT 

Note: You first need to specify the remote settings 
and connect to your remote Web server to use the 
Check In/Check Out function. To set up a remote 
site and connect to it, see Chapter 14. 

O Click Site. 

0 Click Manage Sites. 

The Manage Sites dialog box 
appears. 



0 Click the site name. 

O Click Edit. 

The Site Definition dialog box appears. 

0 Click the Advanced tab. 

0 Click Remote Info. 

0 Click Enable file check in and 
check out. 

0 Type your name and email address. 

0 Click OK. 

© Click Done. 

Check In/Check Out is now enabled. 
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CHECK OUT A FILE 

O Click to select the file in the Files 
panel if it is not checked out and 
then right-click ( f»Blffll + click) it. 

Q Click Check Out. 

Dreamweaver marks the page as 
checked out. 




CHECK IN A FILE 

O Click to select the file that you 
have checked out and then right- 
click (l.nim + click) it. 

Q Click Check In. 

Dreamweaver marks the page as 
checked in. 
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How is a file marked as checked out? 

When you check out a file, Dreamweaver 
creates a temporary LCK file that is stored 
in the remote site folder while the 
page is checked out. The file 
contains information about who 
has checked the file out. 
Dreamweaver does not display 
the LCK files in the file list, but 
you can see them if you access your 
remote site with a different FTP program. 




Can I email someone who has a file checked 
out to tell them that I need it? 

Yes. Dreamweaver collects usernames 
and email addresses in the Check In 
and Check Out fields to make it 
easy for multiple people who are I 
working on the same Web site to 
stay in touch. If someone else has 
a file checked out, you can use the 
Check In/Check Out feature to send 
them an email message. 





If you are working on a site 
collaboratively, design notes 
enable you to add information 
about the development status of 
a file. For example, you can 
attach information to your Web 
pages, such as a request to have 
a page edited before it is 
published. 
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O Open the Web page to which you 
want to attach a design note. 

0 Click File. 

0 Click Design Notes. 

The Design Notes dialog box 



0 Click [▼] and select a status for 
the page. 

0 Type a note. 

0 Click the Date button QJ to 
enter the current date in the 
Notes field. 

You can click Show when file is 

opened (Q changes to [7]) to 
automatically show design notes 
when a file opens. 

0 Click the All info tab. 
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The All info tab is displayed. 

© To enter new information in 
the Design Notes dialog box, 
click [+]. 
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Q Type a name and associated 
value. 

# The added value pair appears in 
the Info section. 

• You can delete information by 
clicking it in the Info section and 
then clicking 

fli) Click OK. 

Dreamweaver attaches the design 
note to the page. 




How can I view design notes? 

You can view design notes in two ways: First, 
files with a design note have a yellow bubble 
in the site window. Double- 
click it to open the design 
note. Alternatively, you 
can open any file with an 
attached design note, 
then click File, and then 
click Design Notes to open 
the design note. 




Are design notes private? 

Although design notes are not linked to the page or 
displayed in a Web browser, anyone with access to your 
server can view your design notes. If someone is 
especially clever and your server does not 
protect the notes folder, then he or she 
may find it, even without password 
access to your site. Ultimately, design 
notes are useful for communication 
among Web designers, but they are not 
meant to protect important secrets. 




Running a site report can help you 
pinpoint problems in your site, 
including redundant HTML code in 
your pages and missing page titles. It 
is a good idea to test your site by 
running a report before you upload it 
to a Web server. 



O Click Site. 

0 Click Reports. 

The Reports dialog box appears. 

0 Click [▼] and select to run a 
report on either the entire site or 
selected files. 

Q Click the reports that you want to 
run Q changes to 

0 Click Run. 



Dreamweaver creates a report 
and displays it in the Results 
panel of the Property inspector. 

0 Click any tab across the top of the 
Results panel to display that 
report. 
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You can search and replace all 
the hyperlinks on your site that 
point to a specific address. This 
is helpful when a page is 
renamed or deleted and the links 
to it need to be updated. 



Change a Link Sitewide 




O Click Site. 

0 Click Change Link Sitewide. 

The Change Link Sitewide dialog 
box appears. 



© Type the old hyperlink destination 
that you want to change. 

© Type the new hyperlink 
destination. 

The hyperlinks must start with 
a forward slash (/) or with a 
mailto : (email) link, or be 
a full URL. 

0 Click OK. 

Dreamweaver finds and replaces 
all instances of the old 
destination. A dialog box asks you 
to confirm the changes. 




0 Type the text that you want to 
find. 

You can click Find Next to find 
instances of your query one at a 
time. 

0 Type the replacement text. 

0 Click Replace to replace the text 
instances one at a time. 

• You can also click Replace All to 

automatically replace all 
instances of your text search. 



If Dreamweaver asks whether you 
want to replace text in unopened 
documents, you can click Yes. 

• Dreamweaver replaces the text, 
and the details appear in the 
bottom of the screen in the 
Reports panel. 




Can I use the Find and Replace feature to 
alter HTML code? 

Yes. Searching for a string 
of code is a quick way to 
make changes to a Web 
site. For example, if you 
want to alter the body 
color for every page, you 
can search for the HTML 
<body> tag and replace it 
with a different color tag. 




Can I use the Find and Replace feature to 
alter an HTML attribute? 

Yes. You can replace attributes 
to achieve many things. For 
example, you can change the 
color of specific text in your 
page (change color=" green" 
to color="red" in <f ont> 
tags) or change the page 
background color across your site (change 
bgcolor="black" to bgcolor="white" in 
<body> tags). 





Adding Interactivity 
AJAX and JavaScript 




When you are ready to 
move on to some of the 
more advanced features 
in Dreamweaver, this 
chapter is for you. Using 
Dreamweaver's behaviors, 
you can create JavaScript 
features, such as rollover 
effects. Using the Spry 
widgets, you can create 
AJAX features, such as 
drop-down menus. 
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Introducing Spry 
and Behaviors 



Some of the most advanced Web site 
features are created by combining 
HTML and CSS with more advanced 
technologies, such as JavaScript. To 
help you create these features without 
having to write the code yourself, 
Dreamweaver includes a collection of 
widgets and behaviors that you can 
use on your Web pages. You will find 
these features under the Spry menu 
and in the Behaviors panel. 
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Behavior Basics 

Behaviors are cause-and-effect events that you can insert into your Web pages. For example, you can use the 
Rollover Image behavior to add an image to a page and then replace that image with another image when a 
visitor rolls a cursor over the first image. Similarly, the Open Browser Window behavior causes a new Web 
browser window to open when a user clicks or moves the cursor over an image. 
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Behaviors and Browsers 

Because behaviors vary in complexity, they are written in various ways to ensure compatibility with older Web 
browsers. The latest versions of both Internet Explorer and Firefox display most of Dreamweaver's behaviors well, 
and you can disable behaviors that may not work in older Web browsers. 





You can create many interactive 
features using Dreamweaver's 
Spry widgets. One of the most 
popular is a drop-down menu, 
which makes it possible to 
include a drop-down list of links 
in a navigation bar. 




...:e: If the Insert panel is not open, click 
Window and then click Insert to open it. 

O Click to place your cursor where 
you want to add the menu. 

Q Click Q 

O Click Spry. 



The Spry Insert panel appears. 
© Click Spry Menu Bar. 

0 Click Horizontal (Q changes 

to®). 
O Click OK. 
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A Spry menu bar appears in the 
workspace. 

Q Click the blue Spry menu bar. 



The menu bar properties appear 
in the Properties inspector. 

O Click Item 1. 

Q Type a name for the menu item 
in the Text field. 

<E> Press (GnSEED- 

r The name appears in the 
workspace and in the Property 
inspector. 

Q Click Item 1.1. 



What are Spry widgets? 

Dreamweaver includes a set of features called Spry widgets, which are designed to make 
it easy to add a variety of complex features to your Web pages. When you use Spry, you 
are adding AJAX, which is a combination of XML and JavaScript that can be styled using 
CSS. Think of a widget as a special feature that is more advanced than most dialog 
boxes and other features in Dreamweaver. With widgets, you can create complex 
features, such as drop-down menus, collapsible panels, tabbed panels, and more. 
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© Click [+] to add an item or 
sub-item. 

• A new item appears in the 
Property inspector and the 
workspace. 



© Click 3 to remove an item or 
sub-item. 

© Click OK. 

The item is removed from the 
Property inspector and the 
workspace. 




What are Spry validation 
widgets? 

The Spry validation widgets 
are designed to work with 
Web forms to add 
validation features, such as 
confirmation that a check 
box has been selected or that a 
password has been entered properly. 




Can I add more widgets and 
extensions to Dreamweaver? 

Yes. Adobe hosts a Developer's section 
on its Web site where programmers can 
offer widgets and other add-ons for 
Dreamweaver. Some widgets are free; 
others cost money. You can learn more 
about widgets and extensions and download 
add-ons for Dreamweaver at www.adobe.com/devnet/ 
dream weaver/. 





After you have added a drop-down 
menu to your site, you will want to 
change the appearance to better 
match the design on your Web 
pages. You can edit the colors, fonts, 
and other features of a drop-down 
menu by editing the corresponding 
CSS rules. 




Note: Add a drop-down menu, as shown in the previous 
section, and then follow these steps. 

O Click Window. 

© Click CSS Styles. 

• The CSS Styles panel opens. 

@ Click + to open the style sheet that 
corresponds to the Spry menu. 



• The Spry menu opens, and all the styles 
that control the appearance of the menu 
are listed in the CSS Styles panel. 

• You can also click once on any style 
name to view and edit the definition in 
the CSS Properties pane. 

• Click here and drag to expand the 
Properties pane. 

© Double-click the name of the style that 
you want to edit. 
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The selected style opens in the 
CSS Rule Definition dialog box. 

0 Click to select a category. 

0 Make your changes to the style. 

In this example, the border is 
removed by changing the border 
setting from solid to none. 

• You can click Apply to preview 
the changes. 

Q Click OK. 



The style change is reflected in the 
workspace. 

0 Click the Visual Aids button ( v o.D - 

Q Click Hide All Visual Aids. 

# In this example, the border that 
surrounded each menu item was 
removed, but the change is only 
visible after you hide the visual aids. 




How do I know which style corresponds to the menu items? 

When you click the name of a style in the CSS Styles panel, the rule is displayed in 
the Properties pane. By studying the style definition rules, you can deduce which 
style controls which formatting element. For example, click the style named 
ul.MenuBarHorizontal a, and you can see that the style controls the background 
color, text color, cursor display, and padding for the active link style, which controls 
how any linked text appears when the page is first loaded into a Web browser. 




Dreamweaver's Tabbed Panels widget, 
available from the Spry menu, makes it 
easy to add a set of panels that can be 
changed by clicking the tabs at the top 
of the panel set. Because the Spry widget 
uses AJAX, the Web page does not have 
to be reloaded for the panels to change 
when a user clicks a tab. 



Create Tabbed Panels 
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Note: If the Insert panel is not open, click 
Window and then click Insert to open it. 

O Click to place your cursor where 
you want to add the panel set. 

Q Click Q 

O Click Spry. 



The Spry Insert panel appears. 
O Click Spry Tabbed Panels. 
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A Spry tabbed panel appears 
in the workspace. 

) Click the blue Spry tabbed 
panels bar. 



© The tabbed panel bar 
properties appear in the 
Properties inspector. 

O Clicks 

• A new tab is added to the 
panel group. 

• Click a tab in the Property 
inspector and click \±] to 
move the tab up or [▼] to 
move it down. 




Can I add as many panels as I want? 

Yes. But keep in mind that the more panels you include, the more space the 
panel group will take up in the browser, and the longer the page will take to 
download. Limiting a panel group to no more than eight items is a good 
practice. 





You can edit the text in the 
panels and tabs of a tabbed 
panel group in Dreamweaver's 
workspace. You can also insert 
images, video, and other 
elements into the panels. 



Add Content to Tabbed Panels 




Note: Insert a tabbed panel group, as 
shown in the previous section, and then 
follow these steps. 

O Click and drag to select the 
text on a tab. 



Q Type to enter new text on 
the tab. 

© Repeat steps 1 and 2 for 
each tab. 

© Click the blue Spry tabbed 
panels bar. 

0 Click the name of a tab to 
select the panel. 



_0 
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) The selected panel is displayed 
in the workspace. 

0 Enter any text, images, or other 
elements you want in the tab 
area. 
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The new content is displayed 
in the panel in Dreamweaver's 
workspace. 

) Repeat steps 4 to 6 for each 
panel. 




Can I add multimedia to tabbed panels? 

Yes. You can insert anything into a panel that you can insert into a Web page, and 
you do so in much the same way. Just make sure that you have selected the 
panel in which you want to add content from the Property inspector while you 
have the blue Spry tabbed panels bar selected. 





You can edit the appearance of tabbed 
panels by editing the corresponding 
style rules. By editing the styles, you 
can change the color, font, and other 
attributes of the panels and tabs. 




Note: Insert a tabbed panel group and add 
content to it, as shown in the previous two sections, 
and then follow these steps. 

O Click Window. 

Q Click CSS Styles. 

• The CSS Styles panel opens. 

@ Click + to open the style sheet 
that corresponds to the tabbed 
panels. 



• The styles that control the appearance 
of the tabbed panels are opened and 
listed in the CSS Styles panel. 

• You can click once on any style name 
to view and edit the definition in the 
CSS Properties pane. 

• Click here and drag to expand the 
Properties pane. 

© Double-click the name of the style 
that you want to edit. 




Adding Interactivity with AJAX and JavaScript \ 



The selected style opens in the 
CSS Rule Definition dialog box. 

© Click a category. 

0 Make your changes to the style. 

In this example, the background 
color is changed from a light gray 
color to a light blue color. 

• You can click Apply to preview 
the changes. 

O Click OK. 



The style change is reflected in 
the workspace. 

© Click to select the name of 
another style you want to edit. 

Q Edit the selected style in the 
Properties pane. 

In this example, the tab color is 
changed. 





Can I use different colors for selected tabs? 

Yes. The Spry panel tabs have separate styles for each of 
the three active link states: Tab, Tab Selected, and Tab 
Hover. You can specify different colors for each setting. 
In this example, the Tab style is light blue, which will 
make links that are not actively selected light blue. 
The Tab Selected style is an orange color. The tab for the 
selected section is displayed in the selector color. 
Link styles can include different background colors, fonts, 
borders, and other variations to create attractive menu 
bars. 

The Tab Hover style appears only when a user rolls the 
cursor over a tab. 




Using the Open Browser 
Window Behavior 



You can launch a new browser window with 
the click of a link, and you can specify the 
height and width of the new window to 
perfectly fit video and images in their own 
viewers or add other additional information, 
such as definitions. 




O Click to select an image, selection 
of text, or other element that you 
want to serve as the trigger for 
the behavior. 

0 Click Window. 

0 Click Behaviors. 

The Behaviors pane opens on the 
Tag inspector tab. 

0 Click Q 



The list of behaviors is displayed. 

0 Click Open Browser Window. 

Note: You can select other behaviors from the list 
to apply those features. 
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The Select File dialog box opens. 

0 Click 0 and select the folder 
with the page to which you 
want to link. 

O Click to select the file. 

O Click OK. 



The Open Browser Window 
dialog box appears. 

Q Click Browse and select the 
page that you want to open in 
the new browser window. 

(E) Type the width and height in 
pixels. 

Select any of the attributes that 
you want to include. 

© Type a name. 

Note: You cannot use spaces or special 
characters. 

© Click OK. 
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What is the difference between behavior events and actions? 

Think of an event in a behavior like a match and the action like the flame on a 
candle. When you use a behavior on your Web page, you get to choose what kind 
of event you want to serve as the spark. One common choice is onclick, which 
triggers the action of a behavior when a user clicks a link. Another common choice 
is onMouseOver, which triggers the action of a behavior when a user rolls the 



cursor over a link. 




Using the Open Browser 
Window Behavior (continued) 
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tabbed panels, 288-289 

templates, 190-191 

text fields in forms, 169 

unordered lists, 66 

Web pages, 22, 47, 224-225 
Crop dialog box, 86 
cropping images, 86-87 
CSS (cascading style sheets) 

applying class styles, 206-207 

attaching external style sheets, 215-217 

creating class styles, 204-205 

creating external style sheets, 214-215 

creating page layouts, 200 

creating styles with Page Properties dialog box, 212-213 

customizing HTML tags, 210-211 

editing external style sheets, 218-219 

editing styles, 202-203, 208-209 

external style sheets, 201 

formatting text, 200 

internal style sheets, 201 

modifying ordered list appearance, 67 

moving multiple styles to external style sheets, 217 

nontext-based features, 213 

overview, 200-201 

problems, 219 

selectors, 201 

types of styles, 209 

Web browsers, 201, 213 
CSS Box model, 222 
CSS (cascading style sheets) layouts 

adding images, 228-229, 232-233 

aligning elements with floats, 230-231 

AP Divs, 223, 234-241 

centering, 223 

changing background color, 229 
changing width, 233 
creating page layouts with AP Divs, 235 
creating styles, 225, 231 
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creating Web pages, 224-225 
CSS Box model, 222 
editing, 226-227 
floating elements, 222 
identifying styles, 227 
nested AP Divs, 223, 241 
overview, 222-223 
predesigned, 223 
resizing, 229 

saving styles to external style sheets, 225 

Z Index, 238-239 
CSS Rule Definition dialog box 

aligning elements, 230-231 

creating class styles, 205 

customizing HTML tags, 211 

editing CSS layouts, 226-227 

editing drop-down menus, 287 

editing external style sheets, 219 

editing styles, 203, 209 

editing tabbed panels, 293 
CSS Styles panel, 203 
customizing 

document windows, 32-33 

HTML tags, 205, 210-211 



defining 

audiences, 9 

editable regions in templates, 193 

form areas, 167 

new Web sites, 20-21 
deleting 

assets from Assets panel, 269 

columns from tables, 137 

files from Web server, 255 

frames, 156 

hotspots, 116 

hyperlinks, 109, 111 

rows from tables, 137 
Description dialog box, 55 
design notes, 272-273 
Design view, 48-49 
Detach from Original command, 189 
detaching 

library items for editing, 188-189 

pages from templates, 195 
disabling 

frame borders, 161 

table borders, 127 
div tag, 51 
documents 

copying text from, 76-77 

windows, 12, 32-33 

XHTML, 47 
domain names, 251 
downloading 

add-ons, 285 

files from Web server, 256-257 

time, 83 
drop-down boxes, 174 
drop-down menus, 282-287 
dynamic Web sites, 7 



E 

editable attributes, 197 
editable regions, 192-193 
editing 

CSS layouts, 226-227 
CSS styles, 202-203 
drop-down menus, 286-287 
external style sheets, 218-219 
head content, 54-55 
images, 87 

library items, 182, 185-189 

linked pages, 107 

pages created from templates, 191 

styles, 208-209 

tabbed panels, 292-293 

templates to update pages, 196-197 
Email Link dialog box, 38, 120 
Expand Files panel, 245 

extensible hypertext markup language (HTML), 46-47, 56-57 
external graphics program, 87 
external style sheets 

adding styles, 215-217 

creating, 214-215 

editing, 218-219 

moving multiple styles, 217 

saving CSS layout styles to, 225 
eyedropper tool, 94 

F 

file transfer protocol (FTP), 252-253, 257, 259 
files 

checking in/out, 271 
deleting from Web server, 255 
downloading from Web server, 256-257 
formats, 81 

inserting Flash video, 98-99 
organizing, 107, 248-249 
publishing online, 254-255 
root, 21, 107 
storing, 21, 257 

uploading to Web server, 254-255 
Files panel, 118, 248-249, 252-253 
Find and Replace dialog box, 276-277 
Flash files, 96-99 
floating elements, 222 
fltlft float, 230 
fltrt float, 230 
folders. 5ee files 
fonts, 35, 70-73 
formatting 

frame borders, 160-161 

images, 34 

text, 35, 200, 207 

buttons, 176-177 
check boxes, 170-171 
creating, 166 
creating text fields, 169 
defining areas, 167 
list/menus, 174-175 
overview, 166 
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processing, 166 
radio buttons, 172-173 
Reset button, 177 
Submit button, 176-177 
text fields, 168-169 
Frame Tag Accessibility Attributes dialog box, 148-149 

adding content, 154-155 
changing, 149 

changing attributes, 152-153 
controlling resizing, 163 
controlling scrollbars, 162 
creating links to, 158-159 
creating nested, 151 
defined, 144 
deleting, 156 
designing with, 6 
disabling borders, 161 
dividing pages into, 150 
formatting borders, 160-161 
inserting predefined frameset, 148-149 
invisible borders, 161 
naming, 157 

opening Frames panel, 147 

overview, 146 

previewing borders, 161 

scrolling options, 153 

setting attributes, 153 

setting up, 146 
Frames panel, 147 
framesets, 149 
freeing nested AP Divs, 241 
FTP (file transfer protocol), 252-253, 257, 259 

G 

GIF format, 81 
godaddy.com Web site, 251 

H 

hi tag, 51 
h6 tag, 51 

head content, 54-55 
headers, 60-61, 232-233 
hexadecimal codes, 75 
History panel, 39 
hosting Web sites, 9 
hotspots, 116-117 

HTML (hypertext markup language) 

attribute, 277 

code, 52-53, 63, 277 

documents, 115 

tags, 205, 210-211 
html tag, 50 

Hyperlink dialog box, 106-109, 113-115 
hyperlinks 

anchor, 112 

changing sitewide, 275 

color, 122-123 

creating, 106-109, 114-115 

creating email, 120 



creating image, 110-111 
creating to frames, 158-159 
creating using Files panel, 118 
defined, 104 
jump, 112 
moving files, 249 
removing, 109, 111 
saving in Assets panel, 267 
targeting, 159 
testing, 109, 121 

hypertext markup language. 5ee HTML (hypertext markup language) 



ID selector/styles, 201, 209 

Image Tag Accessibility Attributes dialog box, 81, 229, 232-233, 266-267 

adding background, 92-93 
adding border, 83 
adding space around, 84-85 
adding to CSS layouts, 228-229 
adding to headers, 232-233 
aligning, 82-83, 222 
applying class styles, 207 
creating image hyperlinks, 110-111 
cropping, 86-87 

editing in external graphics program, 87 

editor, 90-91 

file formats, 81 

formatting, 34 

inserting in tables, 128-129 

inserting into Web pages, 80-81 

inserting rollover, 100-101 

linking to behaviors, 297 

maps, 116-117 

removing links from, 111 

resizing, 88-89 

spacer, 143 

wrapping text around, 82-83 
img scr tag, 51 

Input Tag Accessibility Attributes dialog box, 168-177 

Insert FLV dialog box, 98 

Insert Other Characters dialog box, 69 

Insert Rollover Image dialog box, 100 

inserting 

columns in tables, 136 

content in tables, 128-129 

Flash files, 96-97 

Flash video files, 98-99 

images in tables, 128-129 

images in Web pages, 80-81 

library items, 184-185 

meta descriptions, 55 

meta keywords, 54 

navigation bars, 102-103 

predefined framesets, 148-149 

rows in tables, 136 

special characters, 68 

tables in Web pages, 126-127 

tables inside tables, 134 

text in tables, 128 
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interactivity 

behaviors, 280-281 

drop-down menus, 282-287 

Open Browser Window behavior, 294-297 

Spry, 280-281 

tabbed panels, 288-293 
internal style sheets, 201 
Internet connection, 253 
ISP (Internet service provider), 9, 251 

J-K 

JavaScript, 101. See also interactivity 
JPEG format, 81 
jump links, 112-113 

Keywords dialog box, 54 

L 

layouts, 30-31, 200. 5ee also CSS (cascading style sheets) layouts 
library items 

creating, 182-183 

detaching for editing, 188-189 

editing, 182, 185-187 

inserting, 184-185 

multiple, 183 

reattaching, 189 

undoing updates to, 187 

using in template pages, 193 

viewing, 181 
line breaks, 64 
line numbers, 49 
Link color option, 123 
linking 

frames to Web pages, 155 

images and text to behaviors, 297 

to non-HTML documents, 115 

to outside Web sites, 108-109 

to Web pages, 106-107 
links. 5ee hyperlinks 
List Properties dialog box, 67 
local files, 245 
local sites, 258-259 

M 

main page, 25 

Manage Sites dialog box, 20, 250, 270 
managing 

resizing in frames, 163 

scrollbars in frames, 162 

site assets, 264-265 
maps, 8 

marking files as checked out, 271 

creating drop-down, 282-285 

editing drop-down, 286-287 

Site, 245 

uses, 12 
merging table cells, 139 
meta description, 55 



meta keywords, 54 
modifying. 5ee adjusting 
moving 

cell content around tables, 137 
styles to external style sheets, 217 
multimedia 

adding to tabbed panels, 291 
considerations, 99 

N 

Named Anchor dialog box, 112-113 
naming frames, 157 
navigation bars 

creating, 1 1 1 

inserting, 102-103 

where to insert, 103 
nested AP Divs, 223, 240-241 
New CSS Rule dialog box, 70, 202, 204, 210, 230 
New Document dialog box, 22, 148, 194-195, 214, 224-225 
New Editable Region dialog box, 193 
non-English-language text, 69 

O 

landl.com Web site, 251 

online validator services, 109 

Open Browser Window Behavior, 294-297 

Open Browser Window dialog box, 295 

opening 

existing files in framesets, 154-155 

Frames panel, 147 

linked pages, 107, 119 

panels, 36-37 
ordered lists, 67 
organizing 

assets, 265 

files, 248-249 

folders, 248-249 

Web page files, 107 
outdent paragraph, 65 
Oval Hotspottool, 116 

P 

p tag, 51 

Page Properties dialog box 

adding background images, 92 

changing colors, 74, 94-95, 122-123, 229 

creating styles, 212-213 
pages. 5ee Web pages 
paragraphs 

creating, 62-64 

HTML code, 63 

indenting, 65 
parent AP Div, 240 
Paste Special dialog box, 77 
pasting text, benefits of, 77 
patterns, 93 

percentage dimensions, 88 
pixels, 88 
PNG format, 81 
Polygon Hotspottool, 116 
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preference setting, 42-43 
Preferences dialog box, 27, 42-43, 246 
previewing 

frame borders, 161 

Web pages in browsers, 26-27 
privacy, design note, 273 
Property inspector, 12, 34-35, 202-203 
publishing, 254-255. See also Web site publishing 

Q 

quick tag editor, 56 
QuickTime movie, 115 

R 

radio buttons, 171-173 
reattaching library items, 189 
Rectangular Hotspottool, 116 
redefining HTML tags, 211 
registering domain names, 251 
remote sites 

connecting to, 252-253 

overview, 245 

setting up, 250-251 

synchronizing with local site, 258-259 
removing. 5ee deleting 
renaming AP Div, 239 
Reports dialog box, 274 
repositioning AP Divs, 237 
Reset button, 177 
resizing 

AP Divs, 236 

controlling in frames, 163 

CSS layouts, 229 

images to original size, 89 

using click and drag, 89 

using pixels, 88 
rollover image, 100-101 
Rollover links option, 123 
root folder, 21, 107 
rows (tables), 136-137 
running site reports, 274 

S 

Safari Web browser, 5 

Save As Command dialog box, 40 

Save As dialog box, 24 

Save As Template dialog box, 191 

Save dialog box, 214 

command sequences, 40 

CSS layout styles to external style sheets, 225 

framesets, 149 

hyperlinks in Assets panel, 267 

Web page, 24 
screen readers, 127, 247 
script, 166 
scrollbars, 162 
scrolling options, 153 
search engine rank, 55 
Select Browser dialog box, 247 
Select File dialog box, 110-111, 117, 158-159, 295 



Select HTML File dialog box, 154 
Select Image Source dialog box, 80, 92, 129 
Select Style Sheet File dialog box, 216 
selecting 

browsers, 246-247 

workspace layout, 30-31 
serifs, 71 
setting 

border color and width, 160 

editable regions in templates, 192-193 

frame attributes, 153 

preferences, 42-43 

Table Header, 127 

table width, 142-143 

up frames, 146 

up remote sites, 250-251 
site assets, 264-265 
Site Definition dialog box, 20, 251, 270 
Site menu, 245 
site reports, 274 
Site window, 245 
size, ideal Web page, 83 
spacer image, 143 
special characters, 68 
Split Cell dialog box, 138 

Spry AJAX, 280-281, 283, 285. See also interactivity 
stacking order, 238-239 
Status dialog box, 255 
storing 

files, 257 

page templates, 197 

Web site files in root folder, 21 

styles 

adding to external style sheets, 215 

editing, 208-209 

sheets, 201 

standards, 201 

types, 209 
subfolders, 249 
Submit button, 176-177 
support for XHTML tags, 57 
Synchronize Files dialog box, 258-259 

T 

tabbed panels, 288-293, 293 
Table dialog box, 126-127, 134, 142 
Table Header setting, 127 
tables 

adding cells, 139 
backgrounds, 130-131 
borders, 127 
cell content, 135, 137 
cell dimensions, 140 
cell padding, 132 
cell spacing, 133 
centering, 143 
columns, 136-137 
content, 128-129 
content appearance, 129 
defined, 124 
dimensions, 141 
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headers, 127 

images, 128-129 

inserting in Web pages, 126-127 

inserting tables inside, 134 

merging cells, 139 

percentages for width, 142-143 

rows, 136-137 

splitting cells, 138 

text, 128 
tag selector/styles, 201, 209 
target audiences, 9 
targeting links, 159 
templates 

creating, 190-191 

creating pages from, 194-195 

detaching pages from, 195 

editing pages, 191 

editing to update pages, 196-197 

overview, 180 

setting editable regions, 192-193 
storing page, 197 
viewing, 181 



adding fields to forms, 168-169 

applying class styles, 206 

changing color, 95 

copying and pasting, 77 

copying from another document, 76-77 

designing with, 6 

find and replace, 276-277 

formatting, 35, 61, 200, 207 

inserting in tables, 128 

inserting non-English-language, 69 

linking to behaviors, 297 

style, 169 

wrapping around image, 82-83 
title tag, 50 
toolbar, 12 



uniform resource locator (URL), 21 
unordered lists, 66-67 
Update Files dialog box, 249 
Update Library Items dialog box, 187 
Update Pages dialog box, 187, 197 
Update Template Files dialog box, 197 
uploading files to Web server, 254-255 
URL (uniform resource locator), 21 



validation widgets (Spry), 285 

video, 98-99 

viewing 

design notes, 273 
head content, 54-55 
library items, 181 
templates, 181 
visual aids, 262-263 



Visited links option, 123 
visitors (Web Site), 111 
visual aids, 262-263 



Web pages 

adding titles, 23 

creating, 22, 47, 194-195, 200, 224-225 

detaching from templates, 195 

determining download time, 83 

dividing into frames, 150 

editing templates to update, 196-197 

fonts, 35 

ideal size, 83 

inserting images, 80-81 

inserting tables, 126-127 

linking, 106-107, 155 

previewing in browser, 26-27 

resizing images, 89 

saving, 24 

storing templates, 197 
testing in browsers, 246-247 
using color from, 131 
Web servers 

defined, 5, 244 

downloading files from, 256-257 

preventing premature disconnect, 253 

uploading files, 254-255 
Web site maintenance 

adding content with Assets panel, 266-267 

changing links sitewide, 275 

checking pages in or out, 270-271 

creating design notes, 272-273 

Find and Replace text, 276-277 

managing site assets, 264-265 

running site reports, 274 

specifying favorite assets, 268-269 

viewing visual aids, 262-263 
Web site publishing 

changing ISP, 251 

connecting to remote sites, 252-253 
downloading files from Web servers, 256-257 
FTP, 252-253 

organizing files and folders, 248-249 
overview, 244 

registering domain names, 251 
setting up remote sites, 250-251 
Site window, 245 
subfolders, 249 

synchronizing local and remote sites, 258-259 
testing pages in browsers, 246-247 
uploading files to Web servers, 254-255 
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Adobe, 10 

considerations for multimedia, 99 
Dreamweaver, 285 
dynamic, 7 
FTP tools, 259 
godaddy.com, 251 
hosting, 9 

Internet service providers (ISP), 9 



304 



x-z 

XHTML (extensible hypertext markup language), 46-47, 56-57 



online validator services, 1C 

planning, 8-9 
widgets, 283, 285 
workspace layout, 30-31 
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